Liste der Anhänge anzeigen (Anzahl: 1)
TinyMCE - "content_css" Klassen verstecken
Hallo zusammen,
ich habe die "be_tinyMCE.html5" dahingehend angepasst, das eigene Formate angezeigt werden und auch meine eigene CSS-Datei geladen wird um die Vorschau entsprechend zu aktualisieren. Soweit so gut, funktioniert alles.
Zusätzlich habe ich z.B. per:
Code:
style_formats: [
{title: 'große Schrift', block: 'span', classes: 'text--lg', exact: true}
]
einen eigenen Menüpunkt angelegt, der für Redakteure besser zu verstehen ist als kryptische Klassen-Namen. Auch das funktioniert.
Allerdings habe ich jetzt unter "Formate" > "große Schrift" und "text--lg" stehen.
Es werden also die Stile aus "style_formats" und die angelegten Klassen in der CSS-Datei angezeigt. Kann man das irgendwie verhindern? Also das nur die eigenen "style_format" angezeigt werden, aber dennoch die Styles im Editor sichtbar sind?
Schwierig genau zu beschreiben, aber ich hoffe Ihr versteht was ich meine ;) Im Anhang noch ein Screenshot
VG, Frank
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,
hier mal eine Konfiguration wie Sie bei einem Kunden im Einsatz ist. Vielleicht hilft es.
Anhang 21413
Und die passende Config:
Code:
<?php
namespace Contao;
if ($GLOBALS['TL_CONFIG']['useRTE']):
?>
<script>window.tinymce || document.write('<script src="<?= TL_ASSETS_URL ?>assets/tinymce4/js/tinymce.min.js">\x3C/script>')</script>
<script>
setTimeout(function() {
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);
},
file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
plugins: 'autosave charmap code fullscreen image link lists paste searchreplace tabfocus table template visualblocks',
invalid_elements : 'div,section,header,main,footer,table,tr,td,thead,tbody,tfoot,select,option,input,',
style_formats: [
{title: 'XXXXX Styles', items: [
{ title: 'Einleitungstext', selector: 'p', classes: 'introduction', exact: true },
{ title: 'Button rot (Nur für Links)', selector: 'a', classes: 'button button-red', exact: true },
{ title: 'Button dunkel (Nur für Links)', selector: 'a', classes: 'button button-dunkel', exact: true },
{ title: 'Button outline (Nur für Links)', selector: 'a', classes: 'button button-outline', exact: true },
{ title: 'Graue Infobox (für Text)', inline: 'span', classes: 'infobox' }
]},
{ title: 'Absatz', block: 'p' },
{ title: 'Überschrift 2', block: 'h2' },
{ title: 'Überschrift 3', block: 'h3' },
{ title: 'Überschrift 4', block: 'h4' },
{ title: 'Überschrift 5', block: 'h5' },
{ title: 'Überschrift 6', block: 'h6' }
],
image_class_list: [
{title: 'None', value: ''},
{title: 'Links im Textfluss', value: 'float_left'},
{title: 'Rechts im Textfluss', value: 'float_right'}
],
image_title: true,
// ab Version 4.3 (erzeugt figure mit caption) image_caption: true,
browser_spellcheck: true,
tabfocus_elements: ':prev,:next',
// importcss_append: true,
// importcss_groups: [{title: '<?php echo Config::get('uploadPath'); ?>/tinymce.css'}],
content_css: '<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/theme/css/tinymce.css',
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption,',
menubar: false,
toolbar: 'styleselect | link unlink | bold italic | alignleft aligncenter | bullist numlist outdent indent | undo redo | <?php if (BackendUser::getInstance()->isAdmin): ?>code |<?php endif ?> removeformat'
});
}, 0);
</script>
<?php endif; ?>
