Jak dołączyć edytor TinyMCE do interfejsu?

22

Próbuję dodać edytor TinyMCE w moim interfejsie, z którego użytkownicy mogą publikować, ale jak dotąd nie mieli szczęścia. Oto kod:

PHP:

add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

JavaScript:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML:

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

Problem: Texteditor nie dodaje się do obszaru tekstowego. Chociaż trwa ładowanie pliku js TinyMCE.

tinymce front-end

— Sisir
źródło

1

Być może znajdziesz trochę inspiracji, patrząc na kod edytora Frontend

— mike23

17

Cóż, dzięki wp 3.3 mamy teraz do tego wp_editor()funkcję :)

— Sisir
źródło

1

Tak, z wyjątkiem tego, że wyświetla bezpośrednio edytor, w przeciwieństwie do umożliwienia używania go w

— krótkim kodzie

4

Możesz użyć tego w krótkim kodzie, używając funkcji php ob_content. Te funkcje pozwalają uchwycić dane wyjściowe w zmiennej. Podobnie: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); zwróć szablon $;

— Tosh

2

editor_selector jest przeznaczony do kierowania na klasy, a nie identyfikatory.

Ponadto podczas używania editor_selectornależy ustawić mode: "specific_textareas", aby działał.

Zobacz http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

Twój JavaScript i HTML powinny wyglądać tak:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});

<textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

— maryisdead
źródło

0

Chociaż odpowiedź @maryisdead może być poprawna, dam ci kolejną wskazówkę, najpierw upewnij się, że na stronie jest tylko jeden element z id = "editor", a następnie skonfiguruj tinymce w następujący sposób:

tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

Użyj również jQuery zamiast $ w kodzie javascript, aby mieć pewność, że wywołujesz metody i selektory jQuery.

— adrian7
źródło

0

Editor_selector jest dla klas, a nie dla identyfikatorów.

Powinieneś użyć wartości editor_selector jako nazwy klasy obszaru tekstowego.

— Franklin Inbaraj
źródło