Stile aus tinymce.css werden im TinyMCE nicht zur Auswahl angezeigt
Moin zusammen,
ich habe das Template be_tinyMCE.html5 erstellt und versuche hier custom css Stile im TinyMCE auswählbar zu machen.
Das Template ist wie folgt angelegt:
PHP-Code:
<?php
namespace Contao;
if ($GLOBALS['TL_CONFIG']['useRTE']):
?>
<script>window.tinymce || document.write('<script src="<?= $this->asset('js/tinymce.min.js', 'contao-components/tinymce4') ?>">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
skin: 'contao',
selector: '#<?= $this->selector ?>',
language: '<?= Backend::getTinyMceLanguage() ?>',
element_format: 'html',
document_base_url: '<?= Environment::get('base') ?>',
entities: '160,nbsp,60,lt,62,gt,173,shy',
branding: false,
setup: function(editor) {
editor.getElement().removeAttribute('required');
},
init_instance_callback: function(editor) {
if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
editor.editorManager.get(editor.id).focus();
}
editor.on('focus', function() { Backend.getScrollOffset(); });
},
file_browser_callback: function(field_name, url, type, win) {
Backend.openModalBrowser(field_name, url, type, win, '<?= $this->source ?>');
},
file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
content_css: [
'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css'
<?php
$customTinyCssFile = Config::get('uploadPath') . '/theme/css/tinymce.css';
if(file_exists($customTinyCssFile)):
?>
,'<?= $customTinyCssFile . '?' . time() ?>'
<?php endif; ?>
],
plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace stripnbsp tabfocus table visualblocks visualchars',
browser_spellcheck: true,
tabfocus_elements: ':prev,:next',
importcss_append: true,
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
menubar: 'file edit insert view format table',
toolbar: 'link unlink | image table | formatselect | bold italic | bullist numlist | code',
paste_as_text: true,
importcss_selector_converter: function(selector) {
return false;
},
style_formats_merge: true,
style_formats: [
{title: 'Theme Styles', items: [
{title: 'Red Text - Inline Style', styles: {color: 'red'}}
]}
]
});
</script>
<?php endif; ?>
Die CSS-Datei ist wie folgt angelegt:
PHP-Code:
.stil1 { color: red; }
.stil2 { color: red; }
.stil3 { color: red; }
Das Attribute importcss_selector_converter, style_formats und style_formats_merge habe ich nur testweise eingesetzt, in der Hoffnung das es was hilft.
Die custom css-Datei tinymce.css existiert und wird im Header des IFRAME geladen.
Ich verwende Contao 4.9.23 (LTS).
Keine Ahnung was ich falsch mache.
Danke für eure Hilfe.
Liste der Anhänge anzeigen (Anzahl: 1)
An alle die das Problem haben, das Stile aus der eigenen tinymce.css nicht zur Auswahl angezeigt werden.
Bei mir hing es wohl mit dem Leeren des "Prod.-Cache" zusammen. War mir beim Überfliegen der Dokumentation entgangen.
Siehe: https://docs.contao.org/manual/de/an...konfiguration/
Bezüglich dem Anzeigen eigener Stile im TinyMCE ist meine Erfahrung die, das es besser ist die Stile-Palette in der eigenen be_tinyMCE.html5 selbst zu definieren, da sich so die Anwendung der Stile/Formate genauer festlegen/eingrenzen lässt.
Bezugnehmend auf einen Beitrag hier im Forum, habe ich nachfolgend einige Ansätze zusammengefasst.
Die einfachste Variante ist die, wonach man eine eigene CSS-Datei mit den gewünschten Stilen im TinyMCE einbindet und die Anwendung der Stile, der Vordefinition des TinyMCE überlässt.
Alternativ kann man in der be_tinyMCE.html5 über importcss_selector_converter und/oder importcss_selector_filter die Anwendung der Stile aus der eigenen CSS-Datei weiter eingrenzen/filtern/definieren.
PHP-Code:
importcss_selector_converter: function(selector) {
if(selector.charAt(0) == '.') {
return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1), merge_siblings: true};
}
}
Anleitungen/Ansätze hierzu:
https://www.tiny.cloud/docs/plugins/...ctor_converter
https://www.tiny.cloud/docs-4x/plugi...ctor_converter
https://www.tiny.cloud/docs/configur...nt-formatting/
Am besten finde ich jedoch, die Stile in der be_tinyMCE.html5, unter Verwendung von style_formats: [...] und style_formats_merge: false selbst zu definieren und damit die Auswahl der angewandten Formate/Stile einzuschränken.
Hierdurch und durch das Ausblenden der Menü-Leiste (menubar: false) inkl. der ganzen built-in Formate, ist man bei der Eingabe im Tiny zwar relativ eingeschränkt, bleibt Stil-mäßig jedoch innerhalb der Vorgaben des Designs/Layouts.
Hier meine Beispiel be_tinyMCE.html5:
PHP-Code:
<?php
namespace Contao;
if ($GLOBALS['TL_CONFIG']['useRTE']):
// Use document.write() here in case TinyMCE is loaded in a subpalette (see #1424)
?>
<script>window.tinymce || document.write('<script src="<?= $this->asset('js/tinymce.min.js', 'contao-components/tinymce4') ?>">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
skin: 'contao',
selector: '#<?= $this->selector ?>',
language: '<?= Backend::getTinyMceLanguage() ?>',
element_format: 'html',
document_base_url: '<?= Environment::get('base') ?>',
entities: '160,nbsp,60,lt,62,gt,173,shy',
branding: false,
setup: function(editor) {
editor.getElement().removeAttribute('required');
},
init_instance_callback: function(editor) {
if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
editor.editorManager.get(editor.id).focus();
}
editor.on('focus', function() { Backend.getScrollOffset(); });
},
file_browser_callback: function(field_name, url, type, win) {
Backend.openModalBrowser(field_name, url, type, win, '<?= $this->source ?>');
},
file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
content_css: [
'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css'
<?php
$customTinyCssFile = Config::get('uploadPath') . '/theme/css/tinymce.css';
if(file_exists($customTinyCssFile)):
?>
,'<?= $customTinyCssFile . '?' . time() ?>'
<?php endif; ?>
],
plugins: 'autosave charmap code image importcss link lists paste searchreplace stripnbsp tabfocus table visualblocks visualchars',
browser_spellcheck: true,
tabfocus_elements: ':prev,:next',
importcss_append: true,
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
menubar: false,
toolbar: 'link unlink | image table | bold | subscript superscript | bullist numlist | charmap | formatselect | styleselect | code',
paste_as_text: true,
importcss_selector_converter: function(selector) {
return false;
},
style_formats_merge: false,
style_formats: [
{title: 'Stile', items: [
{title: 'Stil 1', inline: 'span', selector: '*', classes: 'my-style-one', deep: true, merge_siblings: true},
{title: 'Stil 2', inline: 'span', selector: '*', classes: 'my-style-two', deep: true, merge_siblings: true}
]},
{title: 'Social-Media Icons', items: [
{title: 'Instagram Icon', selector: 'a', classes: 'instagram'},
{title: 'Facebook Icon', selector: 'a', classes: 'facebook'},
{title: 'YouTube Icon', selector: 'a', classes: 'youtube'},
{title: 'Xing Icon', selector: 'a', classes: 'xing'}
]}
]
});
</script>
<?php endif; ?>
Meine Beispiel tinymce.css (/files/theme/css/tinymce.css) mit Dummy-Stile für das Backend:
PHP-Code:
/*Feie Stile*/
.my-style-one { border: 1px dashed red; color: red; }
.my-style-two { border: 1px dashed blue; color: blue; }
/*Icon-Font Stile*/
.instagram { border: 1px dashed red; color: red; }
.facebook { border: 1px dashed red; color: red; }
.youtube { border: 1px dashed red; color: red; }
.xing { border: 1px dashed red; color: red; }
Und der Vollständigkeit halber...
Die Stildefinitionen für das Frontend müssen analog dazu, in der Haupt-CSS-Datei (bspw. unter /files/theme/css/styles.css) angelegt sein.
Im Ergebnis sieht der Tiny dann so aus: Anhang 25129
Viel Erfolg.
