Czy istnieje sposób na posiadanie wielu edytorów WYSIWYG dla niestandardowego typu postu? Na przykład, jeśli miałem układ 2 kolumn, chciałbym mieć jeden edytor dla jednej kolumny i inny edytor dla drugiej.
Czy istnieje sposób na posiadanie wielu edytorów WYSIWYG dla niestandardowego typu postu? Na przykład, jeśli miałem układ 2 kolumn, chciałbym mieć jeden edytor dla jednej kolumny i inny edytor dla drugiej.
Odpowiedzi:
Powiedzmy, że został wywołany Twój niestandardowy typ posta Properties
, możesz dodać pole do przechowywania dodatkowego edytora tinyMCE przy użyciu kodu podobnego do tego:
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
to identyfikator, który zastosuje do niego meta-box, Second Column
to tytuł, który będzie miał meta-box, second_column_box
to funkcja, która wydrukuje HTML dla meta-boxa, properties
to nasz niestandardowy typ postu, normal
to lokalizacja meta-boxu i high
określa, że powinna być wyświetlana możliwie wysoko na stronie. (Zwykle poniżej domyślnego edytora tinyMCE).
Następnie, biorąc to za najbardziej podstawowy przykład, musisz dołączyć edytor tinyMCE do obszaru tekstowego. Nadal musimy zdefiniować naszą second_column_box
funkcję, która wydrukuje HTML dla meta-boxu, więc jest to tak dobre miejsce, jak to możliwe:
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;
}
Istnieje kilka problemów, których nie jestem pewien, jak je rozwiązać. Edytor tinyMCE zostanie zagnieżdżony w metaboksie, co może nie być idealne i nie będzie miał możliwości przełączania się między trybami edycji HTML i Visual, a także poleceń wstawiania multimediów, które ma zwykły edytor postów. Wygląda na to, że przełączanie trybów jest zdefiniowane jako funkcja, której pierwszym argumentem jest identyfikator, ale wydaje się również zakodowany w skrypcie wp-tinymce. Można do tego użyć wbudowanych funkcji tinyMCE, ale to zmienia obszar tekstowy między pełnym tinyMCE a podstawowym obszarem tekstowym, bez żadnego przycisku wstawiania WP HTML.
Po pierwsze: wielkie podziękowania dla @Thomas McDonald za jego odpowiedź ; Musiałem znaleźć dokładnie to samo pytanie, które zadał @Paul Sheldrake, a kod Thomasa skierował mnie na właściwy kierunek.
Niestety potem utknąłem, ponieważ musiałem zmienić układ z domyślnego na prostszy i mniejszy, ponieważ musiałem używać TinyMCE w bocznym metaboxie. Szukałem rozwiązania praktycznie wszędzie, a zwłaszcza na MoxieCode TinyMCE Wiki oraz TinyMCE Wskazówki i porady na forum i nic nie znalazłem! 1 Wszystko znalazłem wyjaśniono, jak ustawić theme
, width
, height
, itd. Używając tinyMCE.init({...})
ale widocznie nie można użyć, że podczas korzystania tinyMCE.execCommand("mceAddControl")
.
Byłem prawie zaskoczony, gdy natknąłem się na artykuł wielokrotny TinyMCE 3 wystąpienia na jednej stronie autorstwa Hamilton Chua , a on go przybił! Jego rozwiązaniem było przypisanie tinyMCE.settings
przed dzwonieniem tinyMCE.execCommand("mceAddControl")
, na przykład:
<?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;
Smutne jest to, że nie było to naprawdę trudne, ale nie zostało udokumentowane nigdzie indziej, gdzie mogłem znaleźć. To niesamowite, że prawie nikt inny nie doświadczył tego problemu.
W każdym razie powyższy kod wygenerował następujący drugi TinyMCE w dokładnie takim formacie / układzie, jakiego potrzebował mój klient:
(źródło: mikeschinkel.com )
Więc jeśli używasz powyższego kodu @ Thomas McDonald , zauważysz, że musisz zmodyfikować układ, koniecznie sprawdź niesamowity artykuł Hamiltona Chua (dzięki Ham!) :
PS Jeśli zrobisz coś nawet trochę źle, TinyMCE może po prostu nie pokazać się wcale. Na przykład w moim przypadku używamtheme: "simple"
na początku i nic nie dostałem i zajęło mi ponad godzinę uświadomienie sobie, że po prostu muszę użyćtheme: "advanced"
. Więc jeśli okaże się, że TinyMCE nie działa, koniecznie spróbuj coś zmienić, być może masz podobny problem. (BTW, nie próbowałem żadnych innych motywów ani nie badałem, co jeszcze jest dostępne; jeśli znajdziesz inne działające motywy, zostaw komentarz poniżej).
1 : Bardzo frustrujące! Po nieco ponad miesiącu z WordPress Answer oczekuję teraz, że znajdę odpowiedzi na wszystkie moje pytania o takim samym poziomie jakości jak tutaj, a gdzie indziej zwykle znajduję rozczarowanie!
$script
a także nie ma zamknięcia dla twojego heredoc, tj. EOT;
. Oprócz drobnych błędów jest to dobry przykład działania;;)
Ponieważ znalazłem ten artykuł jako pierwszy wynik w Google, chciałem tylko skomentować, że WP oferuje teraz funkcję do obsługi tego rodzaju zadań.
W ramach add_meta_box
funkcji dodaj następujący kod ->
wp_editor( $content, $editor_id, $settings = array() );
Gdziekolwiek chcesz dodać edytor TinyMCE
Odniesienie: wp_editor
Domyślny edytor tinymce jest ładowany przez funkcję w wp-admin / obejmuje / post.php o nazwie wp_tiny_mce (); Spójrz na źródło w linii 1350. W linii 1478 znajduje się szereg ustawień. Jedna z opcji najwyraźniej oznacza selektor obszaru tekstowego, do którego ma zostać zastosowany edytor javascript. Czytałem ten wpis Keighla na jego blogu, który mnie do niego skierował. Przeczytaj artykuł, a być może istnieje sposób na wywołanie wp_tiny_mce () we wtyczce sekcji administratora i zastosowanie go do drugiego utworzonego obszaru tekstowego.
Mam to po prostu dodając „theEditor” jako atrybut klasy do obszaru tekstowego:
<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>