Как включить редактор 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>

Проблема: Текстедитор не добавляется в текстовую область. Хотя файл TinyMCE js загружается.

tinymce front-end

— Sisir
источник

1

Возможно, вы найдете вдохновение, взглянув на код редактора

— внешнего интерфейса

17

Что ж, благодаря wp 3.3 теперь у нас есть wp_editor()функция для этого :)

— Sisir
источник

1

Да, за исключением того, что он выводит редактор напрямую, а не позволяет вам использовать его в шорткоде ...

— cale_b

4

Вы можете использовать это в шорткоде с помощью функций php ob_content. Эти функции позволяют записывать вывод в переменную. Вот так: ob_start (); include (static :: 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.

— adrian7
источник

0

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

Вы должны использовать значение editor_selector в качестве имени класса текстовой области.

— Франклин Инбарадж
источник