Plugin Codemirror für Tinymce5
Ja, das ist richtig: ein Plugin für ein Plugin!
Worum geht es? Im Tinymce gibt es die Möglichkeit, statt im WYSIWYG-Modus den Seiteninhalt im Quelltext zu bearbeiten. Der von 'Haus aus' voreingestellte Qeuelltext-Editor ist recht primitiv (Text wird als nicht formatierter HTML-Text angezeigt).
Für diesen Quelltext-Editor gibt es eine Alternative: Codemirror
Siehe auch den Artikel Plugin Codemirror für Tinymce4.
Damit der Quelltext-Editor Codemirror im Menü des Tinymce-Editors ausgewählt werden kann, muss das Menü / die Iconleiste des Tinymce angepasst werden. Siehe dazu auch diesen Artikel. Das Verzeichnis mit diesen Menü-Dateien liegt in diesem Pfad: ./plugins/tinymce5/inits/init_....json.
In der Tinymce5 – Konfiguration ./plugins/tinymce5/config/config.php unter dem ersten Punkt $plugin_cf['tinymce5']['init']="..." kann man die init_....json Datei auswählen, die das Aussehen des Editors festlegt (Dateinamen ohne »init_« am Anfang und ohne Dateierweiterung in der Konfigurationszeile eintragen).
Hier biete ich eine angepasste Version der init_fontawesome-codemirror.json als zip-Archive zum Download an. Bei ihr steht in der 3. Zeile ...."charmap codemirror codesample".... und in der 38. - 42. Zeile:
"codemirror":{ "config": { "theme": "%CODEMIRROR_THEME%" } }
In der Tinymce5 – Konfiguration ./plugins/tinymce5/config/config.php muß dann unter dem ersten Punkt
$plugin_cf['tinymce5']['init']="fontawesome-codemirror"
stehen.
Insgesamt sieht die Datei init_fontawesome-codemirror.json so aus:
Dateiname: userfiles/downloads/tools-addons/init_fontawesome-codemirror.json
{
"plugins": [
"advlist anchor autolink autosave charmap codemirror codesample contextmenu emoticons fontawesome fullscreen help hr",
"image imagetools importcss insertdatetime link lists media nonbreaking noneditable paste preview",
"save searchreplace table textcolor toc template visualblocks visualchars wordcount xhplugincall"
],
"external_plugins": {
"fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce5/fontawesome/plugin.min.js",
"xhplugincall":"%CMSIMPLE_ROOT%plugins/tinymce5/tinymce/plugins/xhplugincall/plugin.min.js",
"codemirror":"%CMSIMPLE_ROOT%plugins/tinymce5/tinymce/plugins/codemirror/plugin.min.js"
},
"toolbar": "save | undo redo | formatselect styleselect fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | fullscreen code | visualchars | bold italic | underline strikethrough | subscript superscript | forecolor backcolor | searchreplace cut copy paste pastetext | table | link unlink anchor image media | hr nonbreaking removeformat visualblocks | blockquote | toc | insertdatetime | emoticons charmap fontawesome | preview help ",
"menubar": "edit insert view format table tools help",
"menu": {
"tools": {"title": "Tools", "items": "fontawesome xhplugincall"}
},
"table_advtab": true,
"table_cell_advtab": true,
"table_style_by_css": true,
"autosave_interval": "20s",
"image_advtab": true,
"image_title": true,
"file_picker_callback": "",
"content_css": "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
"importcss_append":true,
"element_format": "html",
"insertdatetime_formats": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],
"relative_urls": true,
"convert_urls": false,
"entity_encoding": "raw",
"extended_valid_elements": "span[*]",
"paste_data_images": true,
"images_upload_url": "./?tinymce5=imageuploader",
"images_upload_credentials": true,
"automatic_uploads": true,
"images_reuse_filename": false,
"codemirror":{
"config": {
"theme": "%CODEMIRROR_THEME%"
}
}
}
./plugins/tinymce5/tinymce/plugins/codemirror/
|- plugin.js
|- plugin.min.js
|- source.html
Somit sollte hier keine Änderung erforderlich sein.