Mehrere TinyMCE-Editoren, aber nur eine Symbolleiste?

9

Ich habe mich im Forum umgeschaut, kann aber keine definitive Antwort auf dieses Problem finden ...

Ich benutze jQuery und TinyMCE auf unserer Website. Ich bin durch die Dokumentation von TinyMCE gegangen, aber ich bin immer noch verloren, fürchte ich. Wir machen eine Schnittstelle, die an mehreren Stellen auf der Seite bearbeitet werden muss. Die einzige Sache ist, jeder von diesen wird alle Bearbeitungswahlen von TinyMCE in einer Symbolleiste an der Spitze haben. Also, um es zusammenzufassen, es gibt mehrere Editoren (die jeweils keine eigenen Symbolleisten haben, nur einen Platz zum Bearbeiten oder Auswählen des Textes) und nur eine Symbolleiste oben auf der Seite, um zu steuern, welche Textbox gerade aktiv ist / p>

Wie konnte dies erreicht werden? Ist es überhaupt möglich? Jede Hilfe, jeder Stoß in die richtige Richtung, irgendwelche Tipps / Tipps / Wissen zu diesem Problem wäre eine große, große Hilfe.

Danke, James

    
littlejim84 02.06.2010, 15:44
quelle

5 Antworten

1

Ich weiß, dass es eine Möglichkeit gibt, die Werkzeugleiste anzuzeigen, wenn ein Textfeld fokussiert ist, und dann bei einem Textarea Blur-Ereignis auszublenden - das könnte also eine Route sein.

Ich mache eine ähnliche Sache (mit mehreren Textareas), wo ich das tinyMCE in Anspruch nehme, also könnte etwas wie Laden nach Bedarf und dann zerstören, wenn fertig (Unschärfe-Ereignis) das sein, wonach du suchst.

>

Ich kann Ihnen nicht meinen gesamten Code geben, da er tatsächlich Teil der IP meines Arbeitgebers ist, aber hier ist ein grober Umriss dazu, der hoffentlich helfen sollte. Das tinyMCE_GZ ist Teil des gzip, das sich außerhalb der tinyMCE-Site befindet.

%Vor%     
dan richardson 02.06.2010, 15:58
quelle
2

Ich habe das mit der 3.x-Version so gemacht (es ist die Prototypensyntax):

Zuerst habe ich einen Toolbar-Wrapper erstellt (in meinem Fall habe ich ihn mit der Position: am oberen Rand des Dokuments fixiert:

) %Vor%

Dann setze ich die Setup-Funktion in den tinyMCE-Einstellungen (für jeden Editor) so:

%Vor%

In meinem Fall funktionierte das - die Editoren zeigen / verstecken die Symbolleisten beim Aktivieren / Deaktivieren.

    
acme 13.12.2010 15:50
quelle
1

Es könnte einen anderen Weg geben. Schauen Sie sich dieses Beispiel an. Ссылка

Sie können die Links unten (Anzeigen, Ausblenden, Fett, Inhalt abrufen usw.) als Menü verwenden (eventuell mit etwas Styling). Rufen Sie dann die ID des Textfelds im Fokus ab und übergeben Sie sie an das Menü (#current) und verwenden Sie sie, um den Textbereich zu ändern.

Um zu erreichen, was Sie beschreiben:

  1. Deaktivieren Sie zuerst alle einzelnen TinyMCE-Menüelemente.
  2. Sobald sie deaktiviert sind, erstellen Sie Ihr eigenes TinyMCE-Menü in HTML und formatieren Sie es entsprechend.
  3. Bestimmen Sie, welches TinyMCE-Textfeld im Fokus ist
  4. Übernehmen Sie die Aktionen von Ihrem neuen Menü in das Textfeld, das fokussiert ist

Jetzt für etwas Code (erfordert möglicherweise einige Debugging ...)

Initialisiere zuerst TinyMCE und deaktiviere die Menüs.

%Vor%

Ich denke, Sie können auch die Funktion _addToolbars in tiny_mce / themes / advanced / editor_template_src.js bearbeiten und dann packen.

Bestimmen Sie dann mit jQuery bind den aktuell scharfgestellten Textbereich:

%Vor%

Dann erstellen Sie den HTML-Code mit unseren Textfeldern und dem Menü

%Vor%

    
Eric Kigathi 12.06.2010 02:34
quelle
1

Ich habe das mit einer älteren Version von tinymce gemacht:

Ссылка http://examples.dtbaker.com.au/code/tinymce/

Habe das aber nicht mit der neuesten Version neu produziert: (

Aber grundsätzlich gibt es zwei Möglichkeiten, dies zu tun:

1) Erstellen Sie Ihr eigenes Menü, das ynymce Argumente auf dem aktiven tinymce Editor aufruft.

2) Stellen Sie die Symbolleiste / das Menü so ein, dass es extern ist, so dass es erscheint, wenn Sie einen Editor fokussieren. Dann positionieren Sie jede Symbolleiste mithilfe von CSS an derselben Stelle. Es sieht also so aus, als ob es eine einzelne Symbolleiste gibt, aber tatsächlich sind mehrere Symbolleisten an derselben Stelle zu sehen.

Ich hoffe, das hilft.

    
dtbaker 24.09.2010 23:46
quelle
0

Ich biete eine Lösung für diese Frage, falls jemand noch einmal hier ist. Sie können execCommand verwenden, um verschiedene Textstile auszuführen, die Sie beim Klicken auf Ihre benutzerdefinierten Schaltflächen verwenden. Zum Beispiel:

%Vor%

wobei # bold, #italic, #ul usw. ids der HTML-Elemente sind, mit denen Sie das Styling implementieren. Zum Beispiel:

%Vor%

Diese Schaltfläche wird den Text fett formatieren, unabhängig davon, ob sich der Text in welchem ​​Beispiel von tinymce befindet. Der einzige Nachteil bei dieser Funktionalität ist, dass Sie viel arbeiten müssen, um den Effekt auf bestimmte Schaltflächen zu zeigen, wenn sie ein- oder ausgeschaltet sind. Wenn Sie sich nicht darum kümmern, wird dies den Trick machen.

Ich hoffe, es hilft ...

    
Learner 10.10.2016 13:43
quelle