How to add image list to Tinymce 4 editor

[Jimmi08]

Tinymce configuration was moved from header.php to tinymce4/init.php file (because there are now 2 tinymce versions possible). Everything else is the same as in 3.5.3

Tinymce 4 - uploading images is paid extension so the code from tinymce3 is not working anymore.

When you upload your images, the file imagelist.js is created in the folder stories/userid/images/

Example of version for tinymce3:

var tinyMCEImageList = new Array(
    ["stories/1/images/**.jpg", "stories/1/images/**.jpg"], 
    ["stories/1/images/**.jpg", "stories/1/images/**.jpg"], 
    ["stories/1/images/**.jpg", "stories/1/images/**.jpg"]);

Example of version for tinymce4:

var tinyMCE4ImageList = [
    { "title": "**.jpg", "value": "stories/1/images/**.jpg" }, 
    { "title": "**.jpg", "value": "stories/1/images/**.jpg" }, 
    { "title": "**.jpg", "value": "stories/1/images/**" }];

This is created in file user\manageimages.php - in version 3.5.7 both versions are created Note: upload class was updated for PHP 8.1 too

function buildImageList( ) {
        $dir = opendir(STORIESPATH."/".USERUID."/images/");
        while($file = readdir($dir)) {
            if(!in_array($file, array(".", "..", "/", "index.php", "imagelist.js"))) {
                $path =  STORIESPATH . "/" . USERUID . "/images/".$file;
                $image_files[] = "[\"" . STORIESPATH . "/" . USERUID . "/images/$file\", \"" . STORIESPATH . "/" . USERUID . "/images/$file\"]";

                $image4_files[] = '{ "title": "'. $file. '", "value": "'.$path.'" }';

            }
        }
        if(isset($image_files)) {
            $handle = fopen(STORIESPATH."/".USERUID."/images/imagelist.js", 'w');
            $text = "var tinyMCEImageList = new Array(\n";
            $text .= implode(", \n", $image_files);
            $text .= ");\n\n";
            fwrite($handle, $text);

            $text = "var tinyMCE4ImageList = [\n";
            $text .= implode(", \n", $image4_files);
            $text .= "];\n\n";
            fwrite($handle, $text);

            fclose($handle);
        }
}

Tinymce configuration: Original version for tinymce3 (still working)

            if (USERUID)
                echo "      external_image_list_url : '" . STORIESPATH . "/" . USERUID . "/images/imagelist.js',";

New version for tinymce4:

$image_list_path = STORIESPATH . "/" . USERUID . "/images/imagelist.js";
$image_list_exists = file_exists($image_list_path); 

if (USERUID && $image_list_exists)
{
echo "
<script src='".STORIESPATH . "/" . USERUID . "/images/imagelist.js"."'></script>";
} 

        if (USERUID && $image_list_exists)
            echo "  image_list: tinyMCE4ImageList ,";

Check if file exists is needed because before it was handled inside tinymce itself. Now is only direct using possible, so this check is needed.

Result:

Good luck.