it-swarm.dev

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

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.

27
Paul Sheldrake

Angenommen, Ihr benutzerdefinierter Beitragstyp heißt Properties, dann würden Sie das Feld für Ihren zusätzlichen tinyMCE-Editor mit folgendem Code hinzufügen:

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-2 ist die ID, auf die die Meta-Box angewendet wird, Second Column ist der Titel der Meta-Box, second_column_box ist die Funktion, die den HTML-Code für die Meta-Box ausgibt, properties ist unser benutzerdefinierter Beitragstyp, normal ist der Die Position des Meta-Felds und high geben an, dass es so hoch wie möglich auf der Seite 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_box -Funktion definieren, die den HTML-Code für die Meta-Box ausgibt. Dies ist also so gut wie jeder andere 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 HTML-Einfügebuttons WP.

20
nobody

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 das TinyMCE in einer Seiten-Metabox verwenden musste. Ich habe praktisch überall nach einer Lösung gesucht und vor allem im MoxieCode TinyMCE Wiki und TinyMCE Tips & How To Forum nichts gefunden! 1 Alles, was ich gefunden habe, erklärte, wie man theme, width, height usw. mit tinyMCE.init({...}) einstellt, aber anscheinend kann man das nicht verwenden, wenn man tinyMCE.execCommand("mceAddControl") verwendet.

Ich war fast ratlos, als ich den Artikel mehrere TinyMCE 3-Instanzen auf einer Seite von Hamilton Chua durchgesehen habe, und er hat es geschafft! Seine Lösung bestand darin, tinyMCE.settings vor dem Aufruf von tinyMCE.execCommand("mceAddControl") zuzuweisen, 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:

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(Quelle: mikeschinkel.com )

Wenn Sie also den obigen @Thomas McDonald Code verwenden, müssen Sie das Layout ändern. Lesen Sie unbedingt den großartigen Artikel von Hamilton Chua (danke Ham!):

P.S.Wenn Sie etwas falsch machen, wird der TinyMCE möglicherweise überhaupt nicht angezeigt. In meinem Fall verwende ich zum Beispiel zuerst theme: "simple" und habe nichts bekommen. Es dauerte über eine Stunde, bis mir klar wurde, dass ich nur theme: "advanced" verwenden musste. 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, ich habe noch keine anderen Themen ausprobiert oder untersucht, was noch verfügbar ist. Wenn Sie andere Themen finden, die funktionieren, geben Sie bitte unten einen Kommentar ab.)

Fußnote

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

18
MikeSchinkel

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

Fügen Sie in der Funktion add_meta_box 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

1
ejhost

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>

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. Es gibt eine Reihe von Einstellungen in Zeile 1478. Eine der Optionen bestimmt anscheinend die Textarea-Auswahl, auf die der Javascript-Editor angewendet werden soll. Ich las diesen Beitrag von Keighl in seinem Blog, der mich darauf hinwies. 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.

0
kevtrout