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.