TinyMCE - "content_css" Klassen verstecken

[bitverdreher]

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:

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

[JMMB]

Hallo,

hier mal eine Konfiguration wie Sie bei einem Kunden im Einsatz ist. Vielleicht hilft es.

tiny.jpg

Und die passende Config:

<?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; ?>

[bitverdreher]

Perfekt, danke. Ich hatte in der Liste der Plugins noch "importcss" mit drin stehen. Dadurch wurden die Styles doppelt angezeigt.

Vielen Dank!!