TinyMCE upload medias capability

Hello,

I know it’s a recurring topic from previous versions, but has anyone found out how to enable file upload capability with TinyMCE if possible in V9 ?

​Thanks for helping

@FredWalker

This is controlled by the following, see attached.

Dr Tim

TinyMCE.jpg.jpg

[LEFT][SIZE=13px][QUOTE=Dr Tim;n83242][/SIZE][/LEFT]

Thank you for the above elements related to tinyMCE configuration.

I’m however using the Scriptcase embedded version of TinyMCE, for which HTML editor code is dynamically generated by some Netmake phpcode ( in the *(_mob)_form0.php, index.php and *B_sajax_js.php[/B] files of the app folder- _mob being for the mobile version ) where it is quite tough to retrieve the original configuration variables that I would be allowed to edit in my application so I don’t loose all effort each time it’s recompiled or the scriptcase gets updated on this point…

​I will first need to enable the editor upload capability before I can define the allowed file capacity, and for that purpose, I’m still unclear on how-to, unless there is a more obvious route to it that I don’t know.

​it has to have a file_browser_callback in the generated JS, according to https://www.tinymce.com/docs/configu…owser_callback [LEFT]​Frederic[/LEFT]

[LEFT][SIZE=13px]@Dr_Tim[/SIZE][/LEFT]
[LEFT][SIZE=13px]Thank you for the above elements related to tinyMCE configuration.[/SIZE]
[/LEFT]
[LEFT][SIZE=13px]I’m however using the Scriptcase embedded version of TinyMCE, for which HTML editor code is dynamically generated by some Netmake phpcode ( in the [/SIZE]*(_mob)_form0.php, index.php [SIZE=13px]and *[/SIZE]B_sajax_js.php [/B][SIZE=13px]files of the app folder- _mob being for the mobile version ) where it is quite tough to retrieve the original configuration variables that I would be allowed to edit in my application so I don’t loose all effort each time it’s recompiled or the scriptcase gets updated on this point…[/SIZE]
[/LEFT]
[LEFT][SIZE=13px]​I will first need to enable the editor upload capability before I can define the allowed file capacity, and for that purpose, I’m still unclear on how-to, unless there is a more obvious route to it that I don’t know.[/SIZE]
[/LEFT]
[LEFT][SIZE=13px]​it has to have a file_browser_callback in the generated JS, according to [/SIZE][/LEFT]

https://www.tinymce.com/docs/configu…owser_callback [LEFT] [LEFT][SIZE=13px]​Frederic[/SIZE][/LEFT]
[/LEFT]

I’ve finally managed to have what I want in scriptcase using a simple solution… Here is the trick :

1 - I have downloaded the tinyMCE from official website ( you can also copy or use the one in /prod/third ) and unzipped it in my scriptcase prod folder.

2 - Then, for test, I have created a control application with a multiple line text field ( from scriptcase development environment ), named mytext

3 - With HTML inspector I identified the id generated by Scriptcase for my field, id_sc_field_mytext

4 - I created PHP code in the onload event of my control form :

 $prodFolder = $_SESSION['scriptcase']['myapplicationname']['glo_nm_path_prod'];
$tinyFolder = $prodFolder."/tinymce/js/tinymce/";

// Declare use of tinyMCE
$msg = "<script src='".$tinyFolder."tinymce.min.js'></script>";

// Instantiate tinyMCE with all plugins I need and have installed
$msg.= "<script>";
$msg.= "tinymce.init({ ";
$msg.= "selector: '#id_sc_field_mytext',";
$msg.= "plugins: 'newdocument, bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, alignjustify, ";
$msg.= "styleselect, formatselect, fontselect, fontsizeselect, cut, copy, paste, bullist, numlist, outdent, indent, ";
$msg.= "blockquote, undo, redo, removeformat, subscript, superscript' });";
$msg.= "</script>";
// and include it in the rendered html form
echo $msg; 

and, there you go !!

From that point, it’s very easy to add any image manager/plugins of your choice, and as well this implementation isn’t impacted by any recompile or scriptcase upgrades.

A very valuable image manager I’ve tested is RESPONSIVE filemanager http://www.responsivefilemanager.com…7F4FjxMP.dpbs

It does integrate very easily in tinyMCE and provide great image management via user interface.

The complete onload code for integration is :


$prodFolder =    $_SESSION['scriptcase']['testtinymce']['glo_nm_path_prod'];
$tinyFolder =     $prodFolder."/tinymce/js/tinymce/";
$respFolder =    $prodFolder."/filemanager/";

$msg = "<script src='".$tinyFolder."tinymce.min.js'></script>";

$msg.= "<script>";
$msg.= "tinymce.init({ ";
$msg.= "selector: '#id_sc_field_mytext',";

$msg.= "plugins: ";
$msg.= "'advlist,autolink,link,image,lists,charmap,print,preview,hr,anchor,pagebreak,searchreplace,wordcount,";
$msg.= "visualblocks,visualchars,code,fullscreen,insertdatetime,media,nonbreaking,table,directionality,emoticons,";
$msg.= "template,textcolor,paste,textcolor,colorpicker,textpattern,contextmenu',";

$msg.= "toolbar: "undo,redo,separator,formatselect,separator,bold,italic,separator,alignleft,aligncenter,";
$msg.= "alignright,alignjustify,separator,bullist,numlist,outdent,indent,separator,link,image",";

$msg.= "statusbar : true,";

$msg.= "menubar : 'file edit insert view format table tools',";
$msg.= "toolbar_items_size: 'small',";

$msg.= "external_filemanager_path:"".$respFolder."",";
$msg.= "filemanager_title:"Responsive Filemanager" ,";
$msg.= "external_plugins: { "filemanager" : "".$respFolder."plugin.min.js"}";

$msg.= "});";
$msg.= "</script>";

echo $msg;

Note : the PHP formatting has stripped all backslashes in the above code and only let ", so just double check after copying the code, if ever you do.

The program was installed according to the procedure ( see documentation in the above link ), under prod folder and the plugin under tinymce/js/tinymce/plugin.

Proper folders set up in the program config.php file and you’re done !

Hope you’ll like it.

cheers

Hi FredWalker,
thank you for your solution for a additional tinyMCE with own init parameters.

Inspired by this I found another way to do merely the same, without having to download/install a new copy of tinyMCE.

You can use a standard text field (bound to text/blob in SQL) and convert it into a tinyMCE.

A short BLOG for this can be found at:
https://asdw.de/en/scriptcase-und-tinymce-mit-benutzerdefinierten-init-parametern/

Maybe this will help somebody in the future.

Sincerely

Gunter Eibl

I really appreciate the time and thought that went into these solutions - thanks to Fred and Gunter - but I’m having trouble with both scenarios - either initializing a separate instance of TinyMCE (in the prod folder) and trying to customize the SC version in prod/third/…

I can’t get the HTML editor to display at all using a separate instance. I’ve carefully checked my code and it just won’t appear. This was tried in both a control app and a form app with the “Multiple Lines” text field.

When calling the SC version of TinyMCE, I can get it to appear with my configurations, including the “images_upload_url” option, but when I try to add the “images_upload_handler” function, the application will not compile. If I try to generate it, it just spins and spins. If I try to Run it, same thing. SC locks up and I can’t do anything but close the browser, restart by dev server, reopen SC and start over.

Does anybody have a clue what’s going on here? Certainly there is a simpler solution to this. I can’t believe we don’t have the option to add image uploads into an HTML editor.