Scriptcase und tinyMCE mit benutzerdefinierten init Parametern – ASDW

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',";

Call tinyMCE in Scriptcase with your init-Settings

tinyMCE is a HTML editor plugin which can be used in own code.

Scriptcase already uses tinyMCE already to show and edit text/blob database fields with HTML formatting.
The developer can set several parameters for this, but not all, especially no plugins.

You could import another copy of tinyMCE and call the init for this.
Doing so, you’ll also have to take care of, when you deoply the application on a live server.

But there is an other way:
Use a standard text-field in Scriptcase, which is bound to a text(blob-field in the sql table.
Then convert this field into a tinyMCE-editor. For this we’ll need the id of the text field. You can get this for example in Chrome via the explore feature.

To do the conversion, add the following code into the onLoad event of the form:

$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;