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".