TinyMCE4-Editor für REDAXO 5

Default-Profil

{
selector: 'textarea.tinyMCEEditor',
file_browser_callback: redaxo5FileBrowser,
plugins: 'autoresize  lists  autolink  link  visualblocks  fullscreen  paste  code  hr  tabfocus  visualchars  table  image',
toolbar: 'insertfile undo redo | styleselect | bold italic  underline  superscript  subscript | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink | table image pastetext removeformat | fullscreen visualblocks',
convert_urls: false,
branding:  false,
statusbar:  false,
autoresize_bottom_margin:  0,
autoresize_max_height:  900,
autoresize_min_height:  120,
autoresize_overflow_padding:  15,
content_css: '/assets/addons/tinymce4/bootstrap/css/bootstrap.min.css',
}

Wichtig: redaxo5FileBrowser ist eine Funktion. Darum werden an dieser Stelle keine Quotes verwendet.

Empfehlungen

convert_urls: false

Wenn convert_urls: true ist, dann verändert Tinymce eingegebene URLs beim speichern. Zum Beispiel wird eine URL /media/xxx in ../media/xxx umgewandelt. Dies ist meistens nicht gewünscht, daher sollte convert_urls: false im Profil enthalten sein (beim Default-Profil ist das schon drin).

Weitere Infos zum Thema: https://www.tinymce.com/docs/configure/url-handling/

Bootstrap-Tabellenlayout im edit

Damit die Bootstrap-Tabellenklassen rsp. auch die Bootstrap-Bilder-Klassen im Editor verfügbar sind, kann das folgende Snippet dem Profil hinzu gefügt werden:

table_class_list: [
    {title: 'None', value: ''},
    {title: 'Table', value: 'table'},
    {title: 'Table striped', value: 'table-striped'}
], 
image_advtab: true,
image_class_list: [
    {title: 'None', value: ''},
    {title: 'Abgerundet', value: 'img-rounded'},
    {title: 'Kreis', value: 'img-circle'},
    {title: 'Responsive', value: 'img-responsive'}
]

Microsoft Word HTML automatisch beim Einfügen entfernen

Damit unnötiger Word HTML Krempel beim Einfügen automatisch entfernt wird (Redakteure werden euch lieben), aber sonstige Formatierungen erhalten bleiben, einfach die Config mit folgendem Snippet erweitern (wichtig, das Plugin paste wird benötigt, siehe Default-Profil oben).

Im paste_word_valid_elements können die Tags erfasst werden, die beibelassen werden sollen. Alles andere wird herausgefiltert.

convert_fonts_to_spans: true,
paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,mark,table,tr,td",
paste_retain_style_properties: "all",
paste_postprocess: function(plugin, args) {
    args.node.innerHTML = tinymce4_cleanHTML(args.node.innerHTML);
}