Gibt es eine Möglichkeit, N WYSIWYG-Editoren in einem benutzerdefinierten Beitragstyp abzurufen?

27

Gibt es eine Möglichkeit, mehrere WYSIWYG-Editoren für einen benutzerdefinierten Beitragstyp zu haben? Wenn ich zum Beispiel ein zweispaltiges Layout hätte, hätte ich gerne einen Editor für eine Spalte und einen anderen für die andere.

Paul Sheldrake
quelle
Welche WYSIWYG-Konfiguration benötigen Sie? Das Vollpanel inkl. Hochladen von Bildern, Vollbildmodus usw.?
Hakre
Bueltge hat einen schönen Artikel, der zeigt, wie das gemacht werden kann: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre
Ich brauche genau diese Frage für ein Kundenprojekt beantwortet. Danke für die Frage!
MikeSchinkel
MikeSchinkel - Ich bin neu in WordPress; Wo muss ich den von Ihnen veröffentlichten Code ablegen?

Antworten:

21

Angenommen, Ihr benutzerdefinierter Beitragstyp wurde aufgerufen Properties, fügen Sie das Feld für Ihren zusätzlichen tinyMCE-Editor hinzu. Verwenden Sie dazu den folgenden Code:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2ist die ID, auf die die Meta-Box angewendet wird, Second Columnist der Titel, den die Meta-Box haben wird, second_column_boxist die Funktion, die den HTML-Code für die Meta-Box ausgibt, propertiesist unser benutzerdefinierter Beitragstyp, normalist der Speicherort der Meta-Box und highgibt an, dass es auf der Seite so hoch wie möglich angezeigt werden soll. (Normalerweise unter dem Standard-tinyMCE-Editor).

Als grundlegendes Beispiel müssen Sie dann den tinyMCE-Editor an ein Textfeld anhängen. Wir müssen noch unsere second_column_boxFunktion definieren , die den HTML-Code für die Meta-Box ausgibt. Dies ist also genau der richtige Ort, um dies zu tun:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Es gibt einige Probleme, bei denen ich nicht sicher bin, wie ich sie lösen soll. Der tinyMCE-Editor befindet sich in einer Metabox, die möglicherweise nicht ideal ist, und bietet nicht die Möglichkeit, zwischen dem HTML- und dem visuellen Bearbeitungsmodus zu wechseln, sowie die Befehle zum Einfügen von Medien, über die der normale Post-Editor verfügt. Das Umschalten der Modi scheint als eine Funktion definiert zu sein, deren erstes Argument die ID ist, aber es scheint auch im wp-tinymce-Skript codiert zu sein. Es ist möglich, die eingebauten tinyMCE-Funktionen zu verwenden, dies ändert jedoch den Textbereich zwischen dem vollständigen tinyMCE und einem Basistextbereich ohne die WP-HTML-Einfügungsschaltflächen.

niemand
quelle
"Meta_boxen"? Genial! Ich dachte, ich sei der Einzige. Versuchen Sie es gleich mit einer Lösung.
Mfields
Die Lösung von Thomas McDonalds funktioniert in 3.1 nicht - gibt es in 3.1 eine Möglichkeit, dies zu tun?
19

Erstens: Vielen Dank an @Thomas McDonald für seine Antwort ; Ich musste genau die Frage herausfinden , die @Paul Sheldrake gestellt hatte , und der Code von Thomas brachte mich in die richtige Richtung.

Leider blieb ich dann hängen, weil ich das Layout von der Standardeinstellung auf ein einfacheres und kleineres Layout ändern musste, da ich den TinyMCE in einer Neben-Metabox verwenden musste. Ich habe praktisch überall nach einer Lösung gesucht und vor allem im MoxieCode TinyMCE Wiki und im TinyMCE Tips & How To Forum nichts gefunden! 1 Alles , was ich fand , erklärte , wie Satz theme, width, heightusw. verwendet , tinyMCE.init({...})aber anscheinend kann man nicht verwenden, wenn Sie verwenden tinyMCE.execCommand("mceAddControl").

Ich war fast ratlos, als ich auf einer Seite des Artikels mehrere TinyMCE 3-Instanzen von Hamilton Chua sah , und er hat es geschafft! Seine Lösung war, tinyMCE.settingsvor dem Anruf zuzuweisen tinyMCE.execCommand("mceAddControl"), zum Beispiel:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

Der traurige Teil ist, dass dies wirklich nicht schwer war, aber es wurde nirgendwo anders dokumentiert, wo ich es finden konnte. Es ist erstaunlich zu entdecken, dass fast niemand dieses Problem erlebt hat.

Der obige Code erzeugte also trotzdem den folgenden zweiten TinyMCE in genau dem Format / Layout, das mein Client benötigte:

Mehrere TinyMCE TextAreas im WordPress 3.0 Admin Editor
(Quelle: mikeschinkel.com )

Wenn Sie also den @Thomas McDonald- Code oben verwenden und feststellen, dass Sie das Layout ändern müssen, lesen Sie unbedingt den großartigen Artikel von Hamilton Chua (danke Ham!) :

PS Wenn Sie etwas falsch machen, wird der TinyMCE möglicherweise überhaupt nicht angezeigt. Zum Beispiel in meinem Fall, den ich zuerst benutzetheme: "simple"und ich habe nichts bekommen und es hat über eine Stunde gedauert, bis mir klar wurde, dass ich nur benutzen musstetheme: "advanced". Wenn Sie also feststellen, dass TinyMCE nicht für Sie funktioniert, versuchen Sie auf jeden Fall, die Dinge zu ändern. Möglicherweise haben Sie ein ähnliches Problem. (Übrigens habe ich noch keine anderen Themen ausprobiert oder untersucht, was noch verfügbar ist. Wenn Sie andere Themen finden, die funktionieren, lassen Sie bitte einen Kommentar unten.)

Fußnote

1 : Sehr frustrierend! Nach etwas mehr als einem Monat mit WordPress Answer erwarte ich nun, Antworten auf alle meine Fragen in der gleichen Qualität wie hier zu finden, und anderswo stoße ich normalerweise auf Enttäuschung!

MikeSchinkel
quelle
Mike, du vermisst ein Gleichgestelltes danach $scriptund es gibt auch keinen Abschluss für deinen Heredoc, dh. EOT;. Abgesehen von den kleinen Fehlern ist es ein gutes Arbeitsbeispiel.;)
t31os
@ t31os - Danke, dass du mich informiert hast. Ich bin mir nicht sicher, wie ich diese vermisst habe. Normalerweise teste und kopiere ich meine Antworten aus meinem Arbeitscode. Stelle dir das vor!
MikeSchinkel 13.11.10
Die Verwendung dieser Lösung führte dazu, dass in 3.1 auch für mich der normale visuelle Editor SimpleLayout festgelegt wurde.
Mfields
@mfields - Schade, dass 3.1 so viele Dinge kaputt gemacht hat. :-(
MikeSchinkel
Wollte Ihre Aufmerksamkeit auf diesen Artikel lenken, da er einige Dinge klarstellen könnte : dannyvankooten.com/450/…
könnte
2

Da ich diesen Artikel als erstes Ergebnis in Google gefunden habe, wollte ich nur erwähnen, dass WP jetzt eine Funktion bietet, um diese Art von Aufgabe zu erledigen.

Fügen Sie innerhalb der add_meta_boxFunktion den folgenden Code hinzu ->

wp_editor( $content, $editor_id, $settings = array() );

Überall dort, wo Sie den TinyMCE-Editor hinzufügen möchten

Referenz: wp_editor

ejhost
quelle
1
Antworten sollten mehr als nur einfache Links sein . Sie sollten eigentlich eine Antwort sein, anstatt eine Route, auf der jemand vielleicht eine Antwort findet. Bitte helfen Sie dabei, das Verrotten von Links zu verhindern, bearbeiten Sie Ihre Antwort und geben Sie die erforderlichen Informationen an, die dem OP sowie späteren Besuchern bei der Lösung ihres Problems helfen.
Kaiser
0

Der Standardeditor tinymce wird von einer Funktion namens wp_tiny_mce () in wp-admin / includes / post.php geladen. Schauen Sie in der Quelle in Zeile 1350 nach. Es gibt eine Reihe von Einstellungen in Zeile 1478. Eine der Optionen bestimmt anscheinend den Textbereich-Selektor, auf den der Javascript-Editor angewendet werden soll. Ich habe diesen Beitrag von Keighl auf seinem Blog gelesen , der mich darauf aufmerksam gemacht hat. Lesen Sie den Artikel und vielleicht gibt es eine Möglichkeit, wp_tiny_mce () in einem Administrator-Plug-in aufzurufen und auf einen zweiten von Ihnen erstellten Textbereich anzuwenden.

kevtrout
quelle
0

Ich habe es einfach durch Hinzufügen von "theEditor" als Klassenattribut zu einem Textbereich erhalten:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
Markus René Einicher
quelle