Scriptcase und tinyMCE mit benutzerdefinierten init Parametern

Veröffentlicht am 27.03.2019 von

tinyMCE in Scriptcase mit beliebigen init-Einstellungen aufrufen

tinyMCE ist ein HTML-Editor, der in eigene Programme eingebunden werden kann.

Scriptcase verwendet ihn standardmäßig zum Anzeigen und Editieren von Text/BLOB-Feldern mit HTML-Formatierung.
Dabei kann man zahlreiche Parameter einstellen, aber nicht alle und vor allem keine Plugins dazu laden.

Natürlich könnte man tinyMCE selbst nochmals einbinden und dabei die init-Prozedur variabel aufrufen.
Dann muss man auch beim Veröffentlichen (deploy) der Anwendung auf den Live-Server diese Installation manuell vornehmen.

Einfacher geht es, wenn man in der Scriptcase Form ein Text-Feld mit dem SQL-Feld verbindet.
Um dann aus dem Text-Feld einen tinyMCE-Editor zu machen, ermittelt man die interne ID des Text-Feldes im HTML (z.B. mit Chrome > untersuchen).

Anschließend bindet man im onLoad-Event der Form den folgenden Code ein:

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

// Declare tinyMCE - the one in Scriptcase
$msg = "<script src='".$tinyFolder."tinymce.min.js'></script>";

// Install tinyMCE with plugins
$msg.= "<script>";
$msg.= "tinymce.init({ ";
$msg.= "selector: '#id_sc_field_text_1',";
$msg.= 'mode: "textareas",';
$msg.= 'theme: "modern",';
$msg.= 'browser_spellcheck : true,';
$msg.= 'relative_urls : false,';
$msg.= 'remove_script_host : false,';
$msg.= 'convert_urls  : true,';
$msg.= "language : 'de',";
$msg.= 'statusbar : false,';
$msg.= "menubar : 'file edit insert view format table tools ',";
$msg.= "plugins : 'advlist,autolink,link,image,lists,charmap,print,preview,hr,anchor,pagebreak,searchreplace,wordcount,visualblocks,visualchars,code,fullscreen,insertdatetime,media,nonbreaking,table,directionality,emoticons,template,textcolor,paste,textcolor,colorpicker,textpattern,contextmenu',";
$msg.= 'toolbar1: "undo,redo,separator,styleselect,separator,bold,italic,separator,alignleft,aligncenter,alignright,alignjustify,separator,bullist,numlist,outdent,indent,separator,fullpage,link,image,template",';
$msg.= 'content_style: ".mce-container-body {text-align: center !important}" });';
$msg.= "</script>";

echo $msg;

$prodFolder = $_SESSION['scriptcase']['tinymce_test']['glo_nm_path_prod'];

$tinyFolder = $prodFolder."/third/tiny_mce_new/js/tinymce/";

// Declare tinyMCE - the one in Scriptcase

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

// Install tinyMCE with plugins

$msg.= "<script>";

$msg.= "tinymce.init({ ";

$msg.= "selector: '#id_sc_field_text_1',";

$msg.= 'mode: "textareas",';

$msg.= 'theme: "modern",';

$msg.= 'browser_spellcheck : true,';

$msg.= 'relative_urls : false,';

$msg.= 'remove_script_host : false,';

$msg.= 'convert_urls : true,';

$msg.= "language : 'de',";

$msg.= 'statusbar : false,';

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

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

$msg.= 'toolbar1: "undo,redo,separator,styleselect,separator,bold,italic,separator,alignleft,aligncenter,alignright,alignjustify,separator,bullist,numlist,outdent,indent,separator,fullpage,link,image,template",';

$msg.= 'content_style: ".mce-container-body {text-align: center !important}" });';

$msg.= "</script>";

echo $msg;

In diesem Script muss jetzt noch der Name des Textfeldes ersetzt werden.
In unserem Beispiel-Code hieß das text-Feld: id_sc_field_text_1

Anschließend kann man auch zusätzliche Funktionen beim Aufruf mitgeben.

Hier zwei Beispiele (bitte den Code vor $msg.=’content_style… einfügen):

$msg.= 'paste_data_images: true,';   // Paste Images into the html

1	$msg.= 'paste_data_images: true,'; // Paste Images into the html

oder eigene Templates definieren:

$msg.= 'toolbar: "template",';
$msg.= "templates: [{title: 'Some title 1', description: 'Some desc 1', content: 'My content'},{title: 'Some title 2', description: 'Some desc 2', url: 'http://asdw.de'}],";
$msg.= "toolbar_items_size: 'small',";

$msg.= 'toolbar: "template",';

$msg.= "templates: [{title: 'Some title 1', description: 'Some desc 1', content: 'My content'},{title: 'Some title 2', description: 'Some desc 2', url: 'http://asdw.de'}],";

$msg.= "toolbar_items_size: 'small',";