Làm cách nào để đưa trình soạn thảo TinyMCE vào frontend?

22

Tôi đang cố gắng thêm trình soạn thảo TinyMCE vào frontend của mình từ nơi người dùng có thể đăng nhưng không gặp may mắn cho đến nay. Đây là mã:

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>

Vấn đề: Texteditor không thêm vào textarea. Mặc dù tệp js TinyMCE đang tải.

tinymce front-end

— Sisir
nguồn

1

Có lẽ bạn sẽ tìm thấy một chút cảm hứng bằng cách xem mã của Frontend Editor

— mike23

17

Vâng, nhờ wp 3.3 bây giờ chúng tôi có wp_editor()chức năng để làm điều đó :)

— Sisir
nguồn

1

Có, ngoại trừ nó xuất trình soạn thảo trực tiếp, trái ngược với việc cho phép bạn sử dụng nó trong một mã ngắn ...

— cale_b

4

Bạn có thể sử dụng mã này trong một mã ngắn bằng cách sử dụng các hàm ob_content của php. Các chức năng này cho phép bạn nắm bắt đầu ra trong một biến. Giống như vậy: ob_start (); bao gồm (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); trả về mẫu $;

— Tosh

2

editor_selector dành cho các lớp nhắm mục tiêu, không phải id.

Ngoài ra, khi sử dụng editor_selector, cần phải thiết lập mode: "specific_textareas"để nó hoạt động.

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

Vì vậy, JavaScript và HTML của bạn sẽ trông như thế này:

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>

— cơ quan quản lý
nguồn

0

Câu trả lời @mary thẩm quyền có thể đúng, tôi sẽ cung cấp cho bạn một mẹo khác, trước tiên hãy đảm bảo chỉ có một yếu tố trong trang của bạn với id = "trình chỉnh sửa" sau đó thiết lập tinymce như vậy:

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

Đồng thời sử dụng jQuery thay vì $ trong mã javascript của bạn để đảm bảo bạn đang gọi các phương thức và bộ chọn jQuery.

— adrian7
nguồn

0

Editor_selector dành cho các lớp và không dành cho id.

Bạn nên sử dụng giá trị của Editor_selector làm tên lớp của textarea.

— Franklin Inbaraj
nguồn