Як мені включити редактор TinyMCE у передній частині?

22

Я намагаюся додати редактор TinyMCE у свій інтерфейс, звідки користувачі можуть розміщувати публікації, але досі не пощастило. Ось код:

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>

Проблема: Texteditor не додає до textarea. Хоча js файл TinyMCE завантажується.

tinymce front-end

— Сисір
джерело

1

Можливо, ви знайдете щось натхнення, переглянувши код редактора Frontend

— mike23

17

Ну, завдяки wp 3.3 тепер ми маємо wp_editor()функцію для цього :)

— Сисір
джерело

1

Так, за винятком редактора виводиться безпосередньо, на відміну від дозволу використовувати його у

— короткому коді

4

Ви можете використовувати це в короткому коді, використовуючи функції php ob_content. Ці функції дозволяють фіксувати вихід у змінну. Так: ob_start (); include (статичний :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); повернути $ шаблон;

— Тош

2

editor_selector призначено для націлювання на класи, а не ідентифікатори.

Також при використанні editor_selectorйого потрібно встановити mode: "specific_textareas"для того, щоб він працював.

Дивіться http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

Отже, ваш JavaScript та HTML повинні виглядати так:

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
джерело

0

Хоча відповідь @maryisdead може бути правильною, я дам вам ще одну пораду, спочатку переконайтеся, що на вашій сторінці є лише один елемент з id = "editor", а потім встановіть tinymce так:

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

Також використовуйте jQuery замість $ у коді javascript, щоб переконатися, що ви викликаєте методи та селектори jQuery.

— Адріан7
джерело

0

editor_selector призначений для класів, а не для ідентифікаторів.

Ви повинні використовувати значення editor_selector як назву класу textarea.

— Франклін Інбарадж
джерело