WYSIWIG-Editor Toolbar anpassen

kris29 · 01. Februar 2012 13:17

Mit AdvancedContent habe ich verschiedene Inhaltsblöcke angelegt, meist einfache Textfelder, die auf der Website zusätzlich zum Hauptinhalt erweiterte Infos anzeigen.

Bei der Erstellung der Inhaltsblöcke im Template hat man leider derzeit nur die Wahl zwischen WYSIWIG true/false. Praktisch wäre hier eine Möglichkeit einen angepassten Editor anzuzeigen. Oftmals reichen ja die Standartbuttons wie Bold, Italic, Link. Den Editor mit der kompletten Werkzeugleiste jedes Mal dort anzuzeigen, ist too much. Außerdem sollen dort auch keine Bilder etc. eingefügt werden können.

Gibt es dafür eine Lösung?

Ich hab schon gelesen, dass es schwer ist den TinyMCE diesbezüglich anzupassen.
Bietet eventl. der MicroTiny dafür Möglichkeiten?

nockenfell · 01. Februar 2012 13:37

Soweit ich weiss, kann man nicht verschiedene Editoren miteinander kombinieren. Entweder hat man den einen oder den anderen Editor aktiv.

TinyMCE kann übrigens recht gut zurechtgestutzt werden. Was auf den Symbolleisten erscheint, kannst du selber in den Einstellungen festlegen.

kris29 · 01. Februar 2012 14:00

nockenfell schrieb:

Was auf den Symbolleisten erscheint, kannst du selber in den Einstellungen festlegen.

Ja, aber da gilt eine Einstellung für alles. Die komplette Symbolleiste brauch ich ja für den Hauptinhalt. Nur bei den zusätzlichen Inhaltsblöcken wäre eine reduzierte Symbolleiste praktischer.

nockenfell · 01. Februar 2012 14:01

kris29 schrieb:

Nur bei den zusätzlichen Inhaltsblöcken wäre eine reduzierte Symbolleiste praktischer.

Hier ist mir nichts bekannt welches dies ermöglichen würde.

NaN · 01. Februar 2012 14:36

Ich denke da gerade über einen ganz bösen Hack nach, mit dem man das evtl. über AdvancedContent steuern könnte.
Idee: Zwei weitere Parameter für die Inhaltsblöcke 'editor' (Name des WYSIWYG Moduls) und 'editor_tools' (CSV mit Namen der Buttons zum Anzeigen - würde derzeit nur beim TinyMCE funktionieren)
Beim Anzeigen der Editor-Felder im Backend werden vorher alle Einstellungen bezüglich der Editoren ausgelesen, in einer Variable gespeichert und in der DB auf die neuen Werte der Parameter gesetzt. Dann wird das Feld erstellt und die original Einstellungen wieder zurückgeschrieben.

Ist übel, ich weiß. Aber anderenfalls müsste man eine eigene Funktion zum Erstellen von WYSIWYG-Feldern schreiben. Ich würde da aber lieber weiterhin die Core-Funktion nutzen wollen.

kris29 · 27. Februar 2012 18:04

Ich habe nun mit meinen Möglichkeiten (CSS/HTML) den Editor soweit angepasst bekommen. Ist zwar auch eine Art "Hack", aber es ist sehr simple.

So sieht das Ergebnis aus: http://www.imgplace.com/viewimg851/7008 … simple.png

Im Admin-Template ergänze ich die style.css. Zuerst alle Buttons ausblenden und danach nur die gewünschten anzeigen:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
#my_basic_wysiwyg_toolbargroup .mce_formatselect,
#my_basic_wysiwyg_toolbargroup .mce_styleselect,
#my_basic_wysiwyg_toolbargroup .mceButton,
#my_basic_wysiwyg_toolbargroup .mceSeparator,
#my_basic_wysiwyg_toolbargroup .mceToolbarRow2 {
    display: none;
}

#my_basic_wysiwyg_toolbargroup .mce_bold,
#my_basic_wysiwyg_toolbargroup .mce_italic,
#my_basic_wysiwyg_toolbargroup .mce_underline,
#my_basic_wysiwyg_toolbargroup .mce_cmslinker,
#my_basic_wysiwyg_toolbargroup .mce_link,
#my_basic_wysiwyg_toolbargroup .mce_unlink,
#my_basic_wysiwyg_toolbargroup .mce_undo,
#my_basic_wysiwyg_toolbargroup .mce_redo,
#my_basic_wysiwyg_toolbargroup .mce_pastetext,
#my_basic_wysiwyg_toolbargroup .mce_charmap  {
    display: block;
}

Über die id der Content-Blocks lässt sich jeder WYSIWYG-Editor ansteuern.
"my_basic_wysiwyg" ist in dem Fall der Name meines content-Blocks.

Mit Firebug lassen sich leicht die Klassen der einzelnen Buttons rausfinden und mit dieser Methode ein/ausblenden.

nicmare · 27. Februar 2012 18:33

das mache ich auch ganz gerne so. aber es wäre besser wenn du es direkt in module_custom ordner schreibst und es lässt sich noch bissl optimieren:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var="hideitems" value="Headerimage,bild1,bild2,bild3,bild4,bild5,bild6"}
{assign var="hideitemsarray" value=','|explode:$hideitems}
<style type="text/css">
{foreach from=$hideitemsarray item="item"}
#m1_block_{$item}_unlink, #m1_block_{$item}_bold, #m1_block_{$item}_italic, #m1_block_{$item}_underline, #m1_block_{$item}_cut, #m1_block_{$item}_copy, #m1_block_{$item}_paste, #m1_block_{$item}_pastetext, #m1_block_{$item}_removeformat, #m1_block_{$item}_justifyleft, #m1_block_{$item}_justifycenter, #m1_block_{$item}_justifyfull, #m1_block_{$item}_justifyright, #m1_block_{$item}_bullist, #m1_block_{$item}_numlist, #m1_block_{$item}_cmslinker, #m1_block_{$item}_link, #m1_block_{$item}_unlink, #m1_block_{$item}_formatselect, #m1_block_{$item}_toolbargroup .mceSeparator, #m1_block_{$item}_undo,
{/foreach}
{literal}{display:none;}{/literal}
</style>

"hideitems" sind die content-blöcke. sollen ja nicht alle modifiziert werden. in der stylsheetliste definiere ich einfach die buttons, die ich nicht haben will.

in meinem fall gings übrigens darum den editor nur bei newsletter made simpel zu manipulieren (also module_custom/NMS/templates/compose.tpl)

Beitrag geändert von nicmare (27. Februar 2012 18:34)

COR9 · 08. April 2014 19:02

kris29 schrieb:

Im Admin-Template ergänze ich die style.css.
Mit Firebug lassen sich leicht die Klassen der einzelnen Buttons rausfinden und mit dieser Methode ein/ausblenden.

Okay, ist ne Weile her, aber mein Problemchen damit könnte auch andere betreffen. Mit Standard-IDs wie m1_content_toolbargroup funktioniert das gut. Aber wenn ich m1_customfield[4]_toolbargroup umschmücken will, verließen sie ihn. Wohl wegen der eckigen Klammern. Hat jemand eine Lösung dafür?

NaN · 09. April 2014 07:37

Wie kommt denn diese ID zustande?
Reden wir hier noch von AC oder von einem anderen Modul?

COR9 · 09. April 2014 08:09

Sorry, bei mir ist es CGBlog. Aus News übernommen, da läuft's genauso. Vielleicht ist das aus einer Zeit, in der es in CSS noch keine Attributselektoren gab? cool

Eigentlich brauche ich lediglich beim Titel und bei einigen custom fields einzeilige Eingaben mit Omega-Button (Sonderzeichentabelle aus TinyMCE). Ich kann dem Kunden nicht sagen: »Geben Sie bitte an der Stelle  oder   ein.« Wie ich aus dem Titel ein mehrzeiliges Feld mach, weiß ich auch noch nicht.

COR9 · 09. April 2014 08:56

Nochmal grundsätzlich nachgedacht: Vielleicht könnte man dafür eine eigene Diskussion eröffnen. Denn das Thema »Editoren anpassen« ist zwar für Admins einer Website zunächst nebensächlich, aber für den späteren Benutzer ist es essenziell.

Ich verdrehe immer wieder die Augen, wie schwer es ist, ein benutzerfreundliches Backend zu zimmern. Wenn dann im Team des Kunden noch Medienpädagogen sitzen ...

Da die meisten CMS identische Editoren verwenden, ist das sicher ein weit verbreitetes Problem. Wobei mich der Verweis auf die TinyMCE-Entwicklerseiten bisher kaum weitergebracht hat, zumal es mir manchmal schwer fällt, das Problem in eine präzise englische Frage zu packen.

Klenkes · 09. April 2014 09:04

Da stimme ich dir in allen Punkten zu!
Für eine normale Inhaltsseite möchte ich auch gerne alle Button haben, doch für die meisten anderen Inhaltsblöcke würde ich gerne die meisten Button abschalten, da 9 von 10 meiner User keine Ahnung von Überschriften, Absätzen, Listen und deren Bedeutung und Benutzung haben.

NaN · 09. April 2014 10:39

Eigentlich brauche ich lediglich beim Titel und bei einigen custom fields einzeilige Eingaben mit Omega-Button (Sonderzeichentabelle aus TinyMCE).

Für den Fall ist es relativ einfach:

{if isset($custom_fields)}
<div class="pageoverflow" id="customfields"> <-- Hier id="customfields" hinzufügen
{foreach from=$custom_fields item='field'}
<div class="pageoverflow">
<p class="pagetext">{$field->prompt}</p>
<p class="pageinput">{$field->field}</p>
</div>
{/foreach}
</div>
{literal}
<style type="text/css">
#customfields .mceToolbar a, #customfields .mceToolbar .mceSeparator {display:none}
#customfields .mceToolbar a[class~="mce_charmap"] {display:block}
</style>
{/literal}
{/if}

Damit werden bei allen benutzerdefinierten Feldern alle Buttons außer dem "Omega-Button" ausgeblendet.
Ist nicht schön, aber schnell und einfach.

Alles andere geht nur über Javascript.
Hier mal ein simples Beispiel:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">

var customFieldsToolbars = [1,3,5,7,9],    // die Nummern der benutzerdefinierten Felder deren Toolbar angepasst werden soll
    optionsToHide = '.mce_cut,.mce_paste'; // die Optionen des Editors, die ausgeblendet werden sollen (Klassen-Selektoren mit Komma getrennt); ist der Wert leer, wird die ganze Toolbar des Feldes ausgeblendet

jQuery(window).load(function(){
	jQuery('#customfields .mceToolbar').each(function(i,elm){
		if(customFieldsToolbars.indexOf(i+1) > -1)
		{
			if(optionsToHide.length > 0)
				jQuery(elm).find(optionsToHide).remove();
			else
				jQuery(elm).remove();
		}
	});
});
</script>

Ist allerdings auch nicht besonders schön. Einerseits weil die Einstellungen wieder für alle benutzerdefinierten Felder gleich sind, andererseits, weil man auf onLoad warten muss. Da wird die Toolbar kurz vollständig angezeigt und dann erst nur die nötigen Buttons.

Besser wäre tatsächlich, die TinyMCE API zu verwenden und bereits vor der Anzeige für jedes Feld die Optionen zu setzen. Damit habe ich mich aber noch nicht beschäftigt. Sollte aber nicht allzu schwer sein.

NaN · 09. April 2014 12:09

Das Problem liegt meiner Meinung nach am TinyMCE Modul bzw. daran, wie es den TinyMCE Editor initialisiert.

Man könnte z.B. auch im Template tinyconfig.tpl des TinyMCE ansetzen und es so abändern, dass nicht alle Editoren für alle Textareas auf der ganzen Seite in einem Rutsch initialisiert werden, sondern jedes einzeln. (klingt aber nach schlechter Performance)

Dabei könnte man nach Namen der Felder filtern und je nach Name andere Optionen vergeben. Blöd ist nur, dass die IDs der Felder in verschiedenen Modulen gleich sein können - unabhängig davon, ob alle Felder dieser ID auch einen WYSIWYG Editor haben sollen oder nicht. Somit kann man leider nicht je nach Modul unterschiedliche Optionen für die gleichen IDs vergeben...

Das ist im TinyMCE Modul etwas komisch gelöst. Die Konfiguration und Initialisierung der Editoren wird als separates Javascript erst nachgeladen. Dazu werden vorher einfach nur die IDs der einzelnen Textareas in einer Session-Variable gespeichert. Diese wird dann, wenn das Javascript geladen werden soll, ausgelesen und das generierte Javascript ausgegeben. Somit hat man leider keine Möglichkeit, jedem Feld gesonderte Optionen zu geben, weil der Tiny sich nur die IDs der Felder, aber nicht deren Optionen merkt. Die müssten dann nämlich auch mit in diese Session-Variable (weil Parameter im Link zum Javascript der denkbar unsicherste Weg in diesem Falle wäre - so wie z.B. der Parameter "frontend" roll siehe dazu hier).

COR9 · 09. April 2014 16:03

NaN schrieb:

... weil die Einstellungen wieder für alle benutzerdefinierten Felder gleich sind ...

Es wird noch hackiger: Ich werde die Felder wohl wieder einzeln in der editarticle.tpl aufrufen, denn kein Benutzer außer mir hat die nötigen Rechte, neue Felder anzulegen. So ließen sich auch »echte« IDs vergeben. Mal sehen ob das klappt.

Beitrag geändert von COR9 (09. April 2014 16:04)

COR9 · 09. April 2014 21:21

Nun müssten nur noch das Standard-Extrafeld und vor allem der title in ein mehrzeiliges Feld umwandelbar sein, um dann wieder den Omega-Button verwenden zu können. Der Titel ist sicher ein Sensibelchen, da daraus URLs et. gebaut werden.
Ich spreche nach wie vor von Modulen swie CGBlog oder News. Wo setzt man da an?

Beitrag geändert von COR9 (09. April 2014 21:24)

Andynium · 10. April 2014 13:10

COR9 schrieb:

Nun müssten nur noch das Standard-Extrafeld und vor allem der title in ein mehrzeiliges Feld umwandelbar sein,

"umwandelbar sein" ist gut wink - kein Problem, dafür musst du "nur" das Modul entsprechend anpassen angel .

Ein einzeiliges Feld wird lt. CMSMS API via CreateInputText erzeugt, währenddessen für eine Textbox CreateTextArea verantwortlich zeichnet.

NaN · 10. April 2014 14:28

Achtung, langer Text ...

Wo setzt man da an?

Am besten immer mit Javascript im jeweiligen Modul-Template. Es ist aber auch noch eine kleine Änderung am TinyMCE Modul nötig.

TinyMCE Modul:

Kopiert die Datei "modules/TinyMCE/templates/tinyconfig.tpl" nach "module_custom/TinyMCE/templates/tinyconfig.tpl".
Öffnet die Datei und sucht nach der Javascript-Funktion "toggleEditor(id)". Steht bei mir in Zeile 124-129:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleEditor(id) {
  if (!tinyMCE.getInstanceById(id))
    tinyMCE.execCommand('mceAddControl', false, id);
  else
    tinyMCE.execCommand('mceRemoveControl', false, id);
}

Ändert diese Funktion in:

Hier klicken, um den Code zum Kopieren zu markieren

function toggleEditor(id) {
  tinymce.execCommand('mceToggleEditor',false,id);
}

News etc.

Kopiert die Datei "modules/News/templates/editarticle.tpl" nach "module_custom/News/templates/editarticle.tpl".
Öffnet die Datei und sucht nach der Javascript-Funktion "jQuery(document).ready(function(){". Steht bei mir in Zeile 95.
Fügt dort folgendes hinzu...

Für das Titel-Feld:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery(document).ready(function(){

	...

	tinymce.init({

		elements: "m1_title", // ID of the inputfield whre you want a WYSIWYG editor
		plugins: '', // csv of TinyMCE plugins; see TinyMCE module settings -> tab: advanced
		theme_advanced_buttons1 : "charmap,bold", // csv of available buttons for that field
		theme_advanced_resizing : true, // allow resizing of the field?
		mode: "exact",
		body_class : "CMSMSBody",
		entity_encoding : "raw",
		visual : false,
		accessibility_warnings : false,
		fix_list_elements : false,
		verify_html : false,
		verify_css_classes : false,
		paste_auto_cleanup_on_paste : true,
		paste_remove_spans : true,
		paste_remove_styles : true,
		forced_root_block : false,
		force_p_newlines : false,
		theme_advanced_path : false,
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left"

	});
});

Ebenso kann man auch die benutzerdefinierten Felder direkt ansprechen. Ist besser als das Kuddelmuddel in meinem vorherigen Post:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery(document).ready(function(){

	...

	tinymce.init({

		elements: "m1_customfield[0]", // ID of the inputfield whre you want a WYSIWYG editor
		plugins: '', // csv of TinyMCE plugins; see TinyMCE module settings -> tab: advanced
		theme_advanced_buttons1 : "charmap,bold", // available buttons for that field
		theme_advanced_resizing : true, // allow resizing of the field?
		mode: "exact",
		body_class : "CMSMSBody",
		entity_encoding : "raw",
		visual : false,
		accessibility_warnings : false,
		fix_list_elements : false,
		verify_html : false,
		verify_css_classes : false,
		paste_auto_cleanup_on_paste : true,
		paste_remove_spans : true,
		paste_remove_styles : true,
		forced_root_block : false,
		force_p_newlines : false,
		theme_advanced_path : false,
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left"

	});
});

Dazu dürfen die benutzerdefinierten Felder aber nicht als mehrzeilige Textfelder deklariert sein. Da kommen sich sonst zwei Answeisungen in die Quere. Für bereits bestehende benutzerdefinierte Felder, die als mehrzeiliges Textfeld deklariert wurden, nehmt diesen Code:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery(document).ready(function(){

	... 

});

jQuery(window).load(function(){   // <-- WICHTIG! Nicht in "jQuery(document).ready(function(){"

	var mceInstance = tinyMCE.getInstanceById('m1_customfield[0]'),
		mceInstanceSettings = mceInstance.settings;
		
	mceInstanceSettings.theme_advanced_buttons1 = "charmap";
	mceInstanceSettings.theme_advanced_buttons2 = "";
	mceInstanceSettings.theme_advanced_buttons3 = "";
	mceInstanceSettings.theme_advanced_buttons4 = "";
	
	mceInstanceSettings.plugins = "";
	
	tinyMCE.execCommand('mceRemoveControl', false, 'm1_customfield[0]');
	tinyMCE.execCommand('mceAddControl', false, 'm1_customfield[0]');
});

Ein Problem bei den benutzerdefinierten Feldern bleibt allerdings bestehen: man hat keine Möglichkeit, an die ID des Feldes heranzukommen. D.h. es macht nicht viel Sinn, die in einer Foreach-Schleife zu durchlaufen, weil der Index des Feldes im Array keinen Bezug zur ID darstellt und es auch sonst keine Variable dafür gibt. Man muss die Felder alle einzeln ansprechen.

Forum für CMS/made simple

#1 01. Februar 2012 13:17

WYSIWIG-Editor Toolbar anpassen

#2 01. Februar 2012 13:37

Re: WYSIWIG-Editor Toolbar anpassen

#3 01. Februar 2012 14:00

Re: WYSIWIG-Editor Toolbar anpassen

#4 01. Februar 2012 14:01

Re: WYSIWIG-Editor Toolbar anpassen

#5 01. Februar 2012 14:36

Re: WYSIWIG-Editor Toolbar anpassen

#6 27. Februar 2012 18:04

Re: WYSIWIG-Editor Toolbar anpassen

#7 27. Februar 2012 18:33

Re: WYSIWIG-Editor Toolbar anpassen

#8 08. April 2014 19:02

Re: WYSIWIG-Editor Toolbar anpassen

#9 09. April 2014 07:37

Re: WYSIWIG-Editor Toolbar anpassen

#10 09. April 2014 08:09

Re: WYSIWIG-Editor Toolbar anpassen

#11 09. April 2014 08:56

Re: WYSIWIG-Editor Toolbar anpassen

#12 09. April 2014 09:04

Re: WYSIWIG-Editor Toolbar anpassen

#13 09. April 2014 10:39

Re: WYSIWIG-Editor Toolbar anpassen

#14 09. April 2014 12:09

Re: WYSIWIG-Editor Toolbar anpassen

#15 09. April 2014 16:03

Re: WYSIWIG-Editor Toolbar anpassen

#16 09. April 2014 21:21

Re: WYSIWIG-Editor Toolbar anpassen

#17 10. April 2014 13:10

Re: WYSIWIG-Editor Toolbar anpassen

#18 10. April 2014 14:28

Re: WYSIWIG-Editor Toolbar anpassen

Fußzeile des Forums