TinyMCE - fertige Konfigurationen
Nachdem ich mich in den letzten Tagen (20.08.2022) wieder mit der Konfiguration des TinyMCE beschäftigt habe, sind die beiden Konfigurationen für TinyMCE 4 und 5 entstanden. Darin sind alle verfügbaren Funktionen (Plugins, die im TinyMCE schon enthalten sind) aktiviert:
- fontawesome
- charmape
- codemirror
- xhplugincall
- toc (Inhaltsverzeichnis für aktuelle Seite)
- und all die anderen Funktionen
Außerdem ist das Attribut loading="lazy" als Parameter für die HTML-Tags <img> und <iframe> fest aktiviert.
Falls diese Option im Einzelfall nicht gewünscht wird, bleibt die Option das Attribut aus dem Quell-Code zu löschen (mit Codemirror).
Im TinyMCE4 erscheint der Codemirror-Editor als Vollbild und im TinyMCE5 popt der Codemirror als Fenster mit max. 1500 * 800 px auf.
Im TinyMCE5 popt der Filebrowser als Fenster mit 800 * 800 px auf.
Wegen dieses Artikels im Forum habe ich in Erwägung gezogen in der init_krl.json nach der Zeile: "automatic_uploads": true,
darauf folgende Zeile so abzuändern: "images_reuse_filename": true,.
Da ich mich im Moment noch nicht dazu durchringen kann die Imagetools abzuschalten (was notwendig wäre, um die Umbenennung durch die Imagetools zu unterbinden), verzichte ich vorerst darauf (Änderung vorbehalten).
Download siehe weiter unten und Listings der modifizierten Dateien ganz unten.
Drop-Down-Menü und Icon-Leiste des TinyMCE 4
Drop-Down-Menü und eingeklappte Icon-Leiste des TinyMCE 5
Drop-Down-Menü und ausgeklappte Icon-Leiste des TinyMCE 5
Vorbereitete Konfigurationen für TinyMCE 4 und 5 mit allen Features, die "von Haus aus" in TinyMCE für CMSimple_XH schon enthalten sind. Somit sind sowohl das Drop-Down-Menü als auch die Icon-Leiste in "Vollausstattung" implementiert.
Inhalt:
Konfigurationsdateien für den Editor TinyMCE 4 und TinyMCE 5 und (bei TinyMCE5) für den Codemirror.
Dabei wird die init-Datei init_krl.js bzw. init_krl.json für den TinyMCE4 bzw. 5 aktiviert.
Zweck:
Ausstattung des Editors TinyMCE 4 bzw. TinyMCE 5 mit allen Möglichkeiten, die von Haus aus im "tinymce4_XH - tinyMCEv4 for CMSimple_XH" und "tinymce5_XH - tinyMCEv5 for CMSimple_XH"enthalten Sind.
Insbesondere sind damit folgende Features gemeint:
Quellcode-Editor Codemirror (TinyMCE4 im Vollbildmodus, TinyMCE5 als Fenster 1500 * 800 px)
Filebrowser des TinyMCE5 als Fenster 800 * 800 px
Sonderzeichentabelle
Zusätzlicher Zeichenfont fontawesome
Einfügen/ändern eines XH-Plugin-Aufrufes
HTML-Tags <img> und <iframe> mit Attribut loading="lazy"
Anwendung:
Legen Sie eine komplette Sicherung des Ordners ./plugins/tinymce4 bzw. des Ordners ./plugins/tinymce5 Ihres CMS an!
Im folgenden werden im Original Dateien überschrieben!
Wenn die Konfiguration als ZIP-File vorliegt, dieses in ein leeres Verzeichnis entpacken.
Den dort enthaltenen Ordner plugins kopieren Sie / laden Sie hoch (mit allen Unterordnern) in das root des CMS.
Bei Rückfrage bestätigen Sie das Überschreiben der alten Dateien.
Jetzt sollte bei angemeldetem Admin im Editorfenster beim Klick auf das ""-Symbol
der Codemirror-Editor im Vollbild (TinMCE 4) oder als Popup-Fenster (TinyMCE 5) aufgehen.
Listings
Dateiname: plugins/tinymce4/config/config.php
<?php
$plugin_cf['tinymce4']['init']="krl";
$plugin_cf['tinymce4']['utf8_marker']="äöü";
$plugin_cf['tinymce4']['CDN_alt_src']="";
$plugin_cf['tinymce4']['CDN']="";
Dateiname: plugins/tinymce4/inits/init_krl.js
{
selector: "%SELECTOR%",
theme: "modern",
skin: "lightgray",
toolbar_items_size: "small",
menubar: true,
plugins: [
"advlist anchor autolink autosave charmap codemirror codesample colorpicker contextmenu emoticons fontawesome fullscreen",
"help hr image imagetools importcss insertdatetime link lists media nonbreaking pagebreak paste preview",
"save searchreplace table template textcolor toc visualblocks visualchars wordcount xhplugincall "
],
external_plugins: {
"fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
},
menu: [
{"title":"Edit", "items":"undo redo | cut copy paste pastetext | selectall | searchreplace"},
{"title":"Insert", "items":"media link image | charmap hr anchor pagebreak insertdatetime nonbreaking template"},
{"title":"View", "items":"visualchars visualblocks visualaid | preview fullscreen | code"},
{"title":"Format", "items":"bold italic underline strikethrough superscript subscript codesample | formats | removeformat"},
{"title":"Table", "items":"inserttable tableprops | cell row column"},
{"title": "Tools", "items": "fontawesome pagebreak toc "}
],
toolbar: "save | undo redo | fullscreen code | fontselect fontsizeselect formatselect styleselect | link unlink anchor | bullist numlist | outdent indent | alignleft aligncenter alignright alignjustify | visualchars | bold italic | underline strikethrough | subscript superscript | forecolor backcolor | image media | searchreplace cut copy paste pastetext | hr nonbreaking pagebreak removeformat visualblocks | codesample | table | blockquote | insertdatetime | emoticons | charmap fontawesome | xhplugincall | preview help ",
image_advtab: true,
image_title: true,
file_browser_callback: "%FILEBROWSER_CALLBACK%",
content_css: "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
importcss_append:true,
style_formats_autohide: true,
importcss_selector_filter: /(?:([a-z0-9\-_]+))(\.[a-z0-9_\-\.]+)$/i,
%LANGUAGE%
element_format: "%ELEMENT_FORMAT%",
block_formats: "%HEADERS%;p=p;div=div;code=code;pre=pre;dt=dt;dd=dd",
"insertdatetime_formats": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],
relative_urls: true,
convert_urls: false,
entity_encoding: "raw",
noneditable_noneditable_class: 'fa',
noneditable_noneditable_class: 'mceNonEditable',
noneditable_leave_contenteditable : true,
extended_valid_elements: 'span[*]',
paste_data_images: true,
images_upload_url : "./?filebrowser=imageuploader&editor=tinymce4",
//images_upload_base_path :"",
images_upload_credentials: true,
automatic_uploads: true,
images_reuse_filename: false,
codemirror:{
width: 1200,
height: 600,
fullscreen: true,
}
}
Dateiname: plugins/tinymce5/filebrowser.js
function wrFilebrowser (callback, value, meta) {
var cmsURL = "%URL%";
var type = meta.filetype;
if (type == "file") {
type = "downloads"
};
if (cmsURL.indexOf("?") < 0) {
cmsURL = cmsURL + "?type="+ type;
} else {
cmsURL = cmsURL + "&type=" + type;
}
// FIXME: avoid the following two global variables!
filebrowsercallback = callback;
filebrowserwindow = tinymce.activeEditor.windowManager.openUrl({
title: "Filebrowser",
width: 800,
height: 800,
url: cmsURL
});
return false;
}
Dateiname: plugins/tinymce5/config/config.php
<?php
$plugin_cf['tinymce5']['init']="krl";
$plugin_cf['tinymce5']['utf8_marker']="äöü";
$plugin_cf['tinymce5']['CDN_src']="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js";
$plugin_cf['tinymce5']['CDN']="";
Dateiname: plugins/tinymce5/inits/init_krl.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 | fullscreen code | link unlink anchor | image media | bullist numlist | outdent indent | alignleft aligncenter alignright alignjustify | visualchars | bold italic | underline strikethrough | subscript superscript | forecolor backcolor | searchreplace cut copy paste pastetext | hr nonbreaking pagebreak removeformat visualblocks | fontselect fontsizeselect styleselect | codesample | table | blockquote | insertdatetime | emoticons | charmap fontawesome | xhplugincall | preview help ",
"menubar": "edit insert view format table tools help",
"menu": {
"tools": {"title": "Tools", "items": "fontawesome xhplugincall"}
},
"toolbar_mode": "wrap",
"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[*],iframe[src|width|height|name|sandbox|srcdoc|loading=lazy],img[class|src|border|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|loading=lazy]",
"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%"
}
}
}
Dateiname: plugins/tinymce5/tinymce/plugins/codemirror/plugin.js
/**
* plugin.js
*
* Copyright 2013 Web Power, www.webpower.nl
* @author Arjan Haverkamp
*/
/* jshint unused:false */
/* global tinymce:true */
tinymce.PluginManager.requireLangPack('codemirror')
tinymce.PluginManager.add('codemirror', function(editor, url) {
function showSourceEditor() {
editor.focus()
editor.selection.collapse(true)
// Insert caret marker
if (editor.settings.codemirror.saveCursorPosition) {
editor.selection.setContent('<span style="display: none;" class="CmCaReT">�</span>')
}
var codemirrorWidth = 1500
if (editor.settings.codemirror.width) {
codemirrorWidth = editor.settings.codemirror.width
}
var codemirrorHeight = 800
if (editor.settings.codemirror.width) {
codemirrorHeight = editor.settings.codemirror.height
}
var buttonsConfig = (tinymce.majorVersion < 5)
? [
{
text: 'Ok',
subtype: 'primary',
onclick: function() {
var doc = document.querySelectorAll('.mce-container-body>iframe')[0]
doc.contentWindow.submit()
win.close()
}
},
{
text: 'Cancel',
onclick: 'close'
}
]
: [
{
type: 'custom',
text: 'Ok',
name: 'codemirrorOk',
primary: true
},
{
type: 'cancel',
text: 'Cancel',
name: 'codemirrorCancel'
}
]
var config = {
title: 'HTML source code',
url: url + '/source.html',
width: codemirrorWidth,
height: codemirrorHeight,
resizable: true,
maximizable: true,
fullScreen: editor.settings.codemirror.fullscreen,
saveCursorPosition: false,
buttons: buttonsConfig
}
if (tinymce.majorVersion >= 5) {
config.onAction = function (dialogApi, actionData) {
if (actionData.name === 'codemirrorOk') {
var doc = document.querySelectorAll('.tox-dialog__body-iframe iframe')[0]
doc.contentWindow.submit()
win.close()
}
}
}
var win = (tinymce.majorVersion < 5)
? editor.windowManager.open(config)
: editor.windowManager.openUrl(config)
if (editor.settings.codemirror.fullscreen) {
win.fullscreen(true)
}
}
if (tinymce.majorVersion < 5) {
// Add a button to the button bar
editor.addButton('code', {
title: 'Source code',
icon: 'code',
onclick: showSourceEditor
})
// Add a menu item to the tools menu
editor.addMenuItem('code', {
icon: 'code',
text: 'Source code',
context: 'tools',
onclick: showSourceEditor
})
} else {
editor.ui.registry.addButton('code', {
icon: 'sourcecode',
title: 'Source code',
tooltip: 'Source code',
onAction: showSourceEditor
})
editor.ui.registry.addMenuItem('code', {
icon: 'sourcecode',
text: 'Source code',
onAction: showSourceEditor,
context: 'tools'
})
}
})
Dateiname: plugins/tinymce5/tinymce/plugins/codemirror/plugin.min.js
tinymce.PluginManager.requireLangPack("codemirror");
tinymce.PluginManager.add("codemirror", function (e, o) {
function t() {
e.focus();
e.selection.collapse(true);
if (typeof e.settings.codemirror == 'undefined') e.settings.codemirror = {};
if (e.settings.codemirror.saveCursorPosition) {
e.selection.setContent('<span style="display: none;" class="CmCaReT">�</span>')
}
var t = 1500;
if (e.settings.codemirror.width) {
t = e.settings.codemirror.width
}
var r = 800;
if (e.settings.codemirror.width) {
r = e.settings.codemirror.height
}
var i = tinymce.majorVersion < 5 ? [{
text: "Ok",
subtype: "primary",
onclick: function () {
var e = document.querySelectorAll(".mce-container-body>iframe")[0];
e.contentWindow.submit();
n.close()
}
}, {
text: "Cancel",
onclick: "close"
}
] : [{
type: "custom",
text: "Ok",
name: "codemirrorOk",
primary: true
}, {
type: "cancel",
text: "Cancel",
name: "codemirrorCancel"
}
];
var c = {
title: "HTML source code",
url: o + "/source.html",
width: t,
height: r,
resizable: true,
maximizable: true,
fullScreen: e.settings.codemirror.fullscreen,
saveCursorPosition: false,
buttons: i
};
if (tinymce.majorVersion >= 5) {
c.onAction = function (e, o) {
if (o.name === "codemirrorOk") {
var t = document.querySelectorAll(".tox-dialog__body-iframe iframe")[0];
t.contentWindow.submit();
n.close()
}
}
}
var n = tinymce.majorVersion < 5 ? e.windowManager.open(c) : e.windowManager.openUrl(c);
if (e.settings.codemirror.fullscreen) {
n.fullscreen(true)
}
}
if (tinymce.majorVersion < 5) {
e.addButton("code", {
title: "Source code",
icon: "code",
onclick: t
});
e.addMenuItem("code", {
icon: "code",
text: "Source code",
context: "tools",
onclick: t
})
} else {
e.ui.registry.addButton("code", {
icon: "sourcecode",
title: "Source code",
tooltip: "Source code",
onAction: t
});
e.ui.registry.addMenuItem("code", {
icon: "sourcecode",
text: "Source code",
onAction: t,
context: "tools"
})
}
});