1

I am working on a Codeigniter project where I need to use multiple TinyMCE editors. Since I have to use an external API for storing files and images, I have created a custom server-side upload handler that gives the resulting URL for the uploaded image.
This works completely fine if I use only one editor on one page, but if I use 2 or more editors, the image tags become
<img alt="" width="724" height="33"> or <img k=" alt=" width="1520" height="820">, i.e, their src attribute remains unset.
This only happens if I use multiple editors on one page.

Moreover, if automatic_uploads: true, then also the content is saved flawlessly and images are visible after posting the form. But I want to keep automatic_uploads disabled so that failed/cancelled attempts at posting the form does not fill useless data on th upload server.

My server-side upload handler:

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Upload extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->library('session');
    }

    public function index()
    {
        // Allowed the origins to upload
        $accepted_origins = array("http://localhost");
        $id = $_GET['id'];
        reset($_FILES);
        $tmp = current($_FILES);
        if (is_uploaded_file($tmp['tmp_name'])) {
            if (isset($_SERVER['HTTP_ORIGIN'])) {
                if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
                    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
                } else {
                    header("HTTP/1.1 403 Origin Denied");
                    return;
                }
            }
            // check valid file name
            if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $tmp['name'])) {
                header("HTTP/1.1 400 Invalid file name.");
                return;
            }
            // check and Verify extension
            if (!in_array(strtolower(pathinfo($tmp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
                header("HTTP/1.1 400 Invalid extension.");
                return;
            }

            // Accept upload if there was no origin, or if it is an accepted origin
            $output = function_to_upload_image_to_API($id, array($tmp));
            $fileId = $output[0]['fileId'];

            $response = array("location" => $fileId);
            echo json_encode($response);

        } else {
            header("HTTP/1.1 500 Server Error");
        }
    }
}

TinyMCE script:
(Editors are added dynamically using tinymce.EditorManager.execCommand("mceAddEditor", false, id);)

tinymce.init({
            mode: "none",
            plugins: 'image, code, link, lists',
            browser_spellcheck : true,
            branding: false,
            convert_urls : true,
            mobile: {
                menubar: true
            },
            toolbar: 'undo redo | styleselect | bold italic | link image code | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent',
            
            images_upload_base_path: 'base_url_of_upload_server',
            automatic_uploads: false,
            // upload image functionality
            <?php
            $id = "some_id";
            ?>
            images_upload_url: '<?=base_url()?>index.php/Upload?id=' + '<?=$id?>',
        });

So, the url that is supposed to be set as src for a particular image would be base_url_of_upload_server/fileId, where fileId is returned by the function "function_to_upload_image_to_API".

0 Answers0