Bagaimana cara saya menyertakan editor TinyMCE di frontend?

22

Saya mencoba untuk menambahkan editor TinyMCE di frontend saya dari mana pengguna dapat memposting tetapi belum beruntung sejauh ini. Ini kodenya:

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>

Masalah: Texteditor tidak menambahkan ke textarea. Meskipun file TinyMCE js sedang memuat.

tinymce front-end

— Sisir
sumber

1

Mungkin Anda akan menemukan beberapa inspirasi dengan melihat kode Editor Frontend

— mike23

17

Terima kasih untuk wp 3.3 sekarang kami memiliki wp_editor()fungsi untuk melakukan itu :)

— Sisir
sumber

1

Ya, kecuali itu menghasilkan editor secara langsung, sebagai lawan memungkinkan Anda untuk menggunakannya dalam kode pendek ...

— cale_b

4

Anda dapat menggunakan ini dalam kode pendek dengan menggunakan fungsi php ob_content. Fungsi-fungsi ini memungkinkan Anda untuk menangkap output dalam suatu variabel. Seperti itu: ob_start (); termasuk (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); mengembalikan $ template;

— Tosh

2

editor_selector untuk kelas penargetan, bukan id.

Juga, saat menggunakan editor_selector, itu diperlukan untuk mengatur mode: "specific_textareas"agar berfungsi.

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

Jadi JavaScript dan HTML Anda akan terlihat seperti ini:

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
sumber

0

Meskipun jawaban @maryisdead mungkin benar, saya akan memberikan Anda tip lain, pertama pastikan hanya ada satu elemen di halaman Anda dengan id = "editor" kemudian setup tinymce seperti:

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

Juga gunakan jQuery alih-alih $ dalam kode javascript Anda untuk memastikan Anda memanggil metode dan pemilih jQuery.

— adrian7
sumber

0

editor_selector adalah untuk kelas dan bukan untuk id.

Anda harus menggunakan nilai editor_selector sebagai nama kelas dari textarea.

— Franklin Inbaraj
sumber