Den TinyMCE für andere Schriftarten in Contao anpassen
Ich habe neulich für ein Kundenprojekt den TinyMCE um die Möglichkeit erweitert, das per CSS definierte Überschriften im Text mit dem rich text editor bequem formatiert möglich sind. Dadurch hat der Redakteur im Tiny Editor nun die Möglichkeit lustig die H1-H6 Überschriften mit zwei WebFonts rein zu malen.
Was wird für die Erweiterung des TinyMCE benötigt?
Wenn vom Kunden die gewünschten Schriftarten, Farben und Schriftgrößen definiert sind kann man mit der Erweiterung vom Tiny für den Redakteur anfangen.
Mein Tipp:
Legt euch in Contao eine Demo-Seite an, in der ihr die H1 – H6 und alle Farben, oder sonstige Inhaltliche Elemente die zum Einsatz kommen anzeigt. Erst wenn die Abgenommen sind, macht es Sinn die Formatierungen auch im Editor einzubinden, sonst entstehen zu viele Schleifen.
Als erstes kopiert ihr euch die Standardkonfiguration des TinyMCE Editors von Contao, die in der Datei system/config/tinyMCE.php liegt, oder ihr verwendet gleich die hier verlinkte Vorlage von mir.
Im gleichen Verzeichnis legt ihr die Datei mit tinycustom.php ab.
Damit die neue und angepasste Konfiguration gezogen wird, müsst ihr noch in die DCA-Konfiguration in der Datei system/config/dcaconfig.php folgende Zeile anpassen.
// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinycustom';Das Menü im Editor mit Farbauswahl
Hier ein Beispiel wie das Menü im TinyMCE Editor aussehen kann, wenn die Farben color1 - color6 am Text eingesetzt sind. Den Text habe ich hier in dem Beispiel markiert, das die Einfärbung (Überlagerung der default Farbe) besser zu erkennen ist.
Es wird bunt und der Kundenwunsch wurde erfüllt! ;-)
TinyMCE Editor Konfiguration
<?php
if ($GLOBALS['TL_CONFIG']['useRTE']):
?>
<script>window.tinymce || document.write('<script src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
skin: 'contao',
selector: '#<?php echo $selector; ?>',
language: '<?php echo Backend::getTinyMceLanguage(); ?>',
element_format: 'html',
document_base_url: '<?php echo Environment::get('base'); ?>',
entities: '160,nbsp,60,lt,62,gt,173,shy',
setup: function(editor) {
editor.getElement().removeAttribute('required');
},
init_instance_callback: function(editor) {
editor.on('focus', function(){ Backend.getScrollOffset(); });
},
file_browser_callback: function(field_name, url, type, win) {
Backend.openModalBrowser(field_name, url, type, win);
},
templates: [
<?php echo Backend::getTinyTemplates(); ?>
],
plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus template visualblocks',
browser_spellcheck: true,
tabfocus_elements: ':prev,:next',
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
menubar: 'file edit insert view format table',
//menubar: false,
body_class: "ce_text",
paste_as_text: true,
toolbar: 'styleselect | link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',
content_css: '<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymcecustom.css?' + new Date().getTime(),
importcss_selector_converter: function(selector) {
if(selector.charAt(0) == '.') {
return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1)};
}
},
importcss_append: true,
keep_styles: false,
style_formats: [
{title: 'H1 Relation', block: 'h1', attributes: { class: "relation-h1" }},
{title: 'H1 Relation grün', block: 'h1', attributes: { class: "relation-h1 gruen-text" }},
{title: 'H1 Relation w', block: 'h1', attributes: { class: "relation-h1 w-text" }},
{title: 'H2 Relation', block: 'h2', attributes: { class: "relation-h2" }},
{title: 'H2 Relation grün', block: 'h2', attributes: { class: "relation-h2 gruen-text" }},
{title: 'H2 Relation w', block: 'h2', attributes: { class: "relation-h2 w-text" }},
{title: 'H3 Relation', block: 'h3', attributes: { class: "relation-h3" }},
{title: 'H3 Relation grün', block: 'h3', attributes: { class: "relation-h3 gruen-text" }},
{title: 'H3 Relation w', block: 'h3', attributes: { class: "relation-h3 w-text" }},
{title: 'H4 Relation', block: 'h4', attributes: { class: "relation-h4" }},
{title: 'H4 Relation grün', block: 'h4', attributes: { class: "relation-h4 gruen-text" }},
{title: 'H4 Relation w', block: 'h4', attributes: { class: "relation-h4 w-text" }},
{title: 'H1 Gravitybook', block: 'h1', attributes: { class: "" }},
{title: 'H1 Gravitybook grün', block: 'h1', attributes: { class: "gruen-text" }},
{title: 'H1 Gravitybook w', block: 'h1', attributes: { class: "w-text" }},
{title: 'H2 Gravitybook', block: 'h2', attributes: { class: "" }},
{title: 'H2 Gravitybook grün', block: 'h2', attributes: { class: "gruen-text" }},
{title: 'H2 Gravitybook w', block: 'h2', attributes: { class: "w-text" }},
{title: 'H3 Gravitybook', block: 'h3', attributes: { class: "" }},
{title: 'H3 Gravitybook grün', block: 'h3', attributes: { class: "gruen-text" }},
{title: 'H3 Gravitybook w', block: 'h3', attributes: { class: "w-text" }},
{title: 'H4 Gravitybook', block: 'h4', attributes: { class: "" }},
{title: 'H4 Gravitybook grün', block: 'h4', attributes: { class: "gruen-text" }},
{title: 'H4 Gravitybook w', block: 'h4', attributes: { class: "w-text" }},
{title: "Fließtext", block: "p", attributes: { class: "" }}
],
style_formats_merge: true,
convert_urls: false
});
</script>
<?php endif; ?>Was macht die angepasste TinyMCE Konfiguration?
Hier ein Beispiel wie ich für zwei Schriftarten und drei Farben für den Redakteur das lustige einfärben im Text per rich text editor ermögliche.
H1 Überschrift in grün (setzt die class "gruen-text")
H1 Überschrift in schwarz (setzt die class "schwarz-text")
Beide CSS classes für die H1 und co. werden in eurer Frontend CSS Datei und in der tinymcecustom.css die im Verzeichnis /files/ liegt definiert.
Damit die Schriften auch im Backend und im Editor erscheinen, ist es notwendig die Pfade zu euren Schriften auch in der tinymcecustom.css bis zum Ordner /files/ … zu hinterlegen.
Hier ein kleiner Auszug aus dem Kundenprojekt.
@font-face {
font-family: DER-FONT;
src: url('../files/PROJEKT-XYZ/themes/fonts/zzz-webfont.woff2') format('woff2'),
url('../files/ PROJEKT-XYZ /themes/fonts/zzz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1.DER-FONT-h1,
h2.DER-FONT-h2,
h3.DER-FONT-h3,
h4.DER-FONT-h4
{
font-family: DER-FONT, sans-serif;
text-transform:inherit;
font-style: normal;
font-weight: 400;
}
/* Text-Farben */
.w-text{color:#ccc;}
.schwarz-text{color:#000;}
.gruen-text{color:#67B42A;}Wenn ihr die gleiche Schriftart oder Schriftgröße im Tiny anzeigen möchtet, könnt ihr in der CSS noch dem body,p{} die gleichen Werte übergeben. Auch sehr nützlich ist das setzen einer CSS class im Body vom iFrame des TinyMCE Editor Contao. In der Konfiguration gibt es dafür den Parameter body_class: "ce_text".
So, jetzt hoffe ich, das eure Kunden nicht zu viele bunte Dinge im Editor verunstalten wollen / sollen, aber als Ansatz für andere Formatierungen im TinyMCE Editor, ist sicher ein guter Ansatz die Konfiguration anzupassen.
Viele Erfolg beim Anpassen vom TinyMCE für Contao. Wenn ich Sie wie eine Contao Agentur für Ihr Webprojekt unterstützen kann, dann melden Sie sich gerne bei mir.