Czy istnieje sposób na uzyskanie liczby N edytorów WYSIWYG w niestandardowym typie postów?

27

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.

Paul Sheldrake
źródło
Jakiej konfiguracji WYSIWYG potrzebujesz? Pełny panel wraz z przesyłanie zdjęć, tryb pełnoekranowy itp.?
hakre
Bueltge ma fajny artykuł, który pokazuje, jak można to zrobić: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre
Potrzebuję dokładnie odpowiedzi na to pytanie dla projektu klienta. Dzięki, że pytasz!
MikeSchinkel,
MikeSchinkel - jestem nowy w WordPress; gdzie mam umieścić kod, który opublikowałeś?

Odpowiedzi:

21

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-2to identyfikator, który zastosuje do niego meta-box, Second Columnto tytuł, który będzie miał meta-box, second_column_boxto funkcja, która wydrukuje HTML dla meta-boxa, propertiesto nasz niestandardowy typ postu, normalto lokalizacja meta-boxu i highokreś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_boxfunkcję, 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.

nikt
źródło
„Meta_boxen”? Niesamowite! Myślałem, że jestem jedynym. Za chwilę dam ci rozwiązanie.
pola
Rozwiązanie Thomasa McDonalda nie działa dla mnie w wersji 3.1 - czy jest sposób, aby to zrobić w wersji 3.1?
19

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.settingsprzed 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:

Wiele obszarów tekstowych TinyMCE w edytorze administracyjnym WordPress 3.0
(ź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).

Notatka

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!

MikeSchinkel
źródło
Mike, tracisz równość po, $scripta także nie ma zamknięcia dla twojego heredoc, tj. EOT;. Oprócz drobnych błędów jest to dobry przykład działania;;)
t31os
@ t31os - Dziękujemy za poinformowanie mnie. Nie jestem pewien, jak mi tego brakowało; Zwykle testuję, a następnie kopiuję odpowiedzi z działającego kodu. Domyśl!
MikeSchinkel,
użycie tego rozwiązania spowodowało, że normalny edytor wizualny został ustawiony dla SimpleLayout również dla mnie w 3.1.
pola
@mfields - Bummer, który 3.1 złamał tak wiele rzeczy. :-(
MikeSchinkel
Chciałem zwrócić uwagę na ten artykuł, ponieważ może on wyjaśnić niektóre rzeczy: dannyvankooten.com/450/…
marfarma
2

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_boxfunkcji dodaj następujący kod ->

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

Gdziekolwiek chcesz dodać edytor TinyMCE

Odniesienie: wp_editor

ejhost
źródło
1
Odpowiedzi powinny być czymś więcej niż zwykłymi linkami . Powinny one być odpowiedzią, a nie drogą, na której ktoś może znaleźć odpowiedź. Pomóż zapobiegać gniciu linków, edytuj swoją odpowiedź i podaj potrzebne informacje, które pomogą OP, a także późniejszym odwiedzającym rozwiązać ich problem.
kaiser
0

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.

kevtrout
źródło
0

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>
Markus René Einicher
źródło