Как добавить редактор TinyMCE во фронтенд?

Question

Как добавить редактор TinyMCE во фронтенд?

20 мая 2011 г., 13:26:11

Просмотры: 36.8K

Голосов: 27

Я пытаюсь добавить редактор 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", 
        /*плагины : "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>

Проблема: Текстовый редактор не добавляется к textarea. Хотя JS-файл TinyMCE загружается.

Sisir

7.82K

tinymce фронтенд

Комментарии

Возможно, вы найдёте вдохновение, изучив код Frontend Editor

mike23

15 июн. 2011 г. 10:57:24

Все ответы на вопрос

Комментарии

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

random_user_name

5 дек. 2012 г. 05:35:37

Вы можете использовать это в шорткоде с помощью функций ob_content в PHP. Эти функции позволяют захватить вывод в переменную. Например: ob_start(); include( static::getTemplatePath() . '/' . $templatePath . '.php'); $template = ob_get_contents(); ob_end_clean(); return $template;

Tosh

2 апр. 2014 г. 17:33:27

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

823

26 июн. 2011 г. 00:15:58

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

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

Также используйте jQuery вместо $ в вашем JavaScript коде, чтобы быть уверенным, что вы вызываете методы и селекторы jQuery.

adrian7

316

5 авг. 2011 г. 23:00:59

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

Вам следует использовать значение editor_selector в качестве имени класса для элемента textarea.

Franklin Inbaraj

1

29 мар. 2016 г. 08:53:34

Sisir 7.82K · Accepted Answer · 2011-12-12T15:06:00Z

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

Sisir

7.82K

12 дек. 2011 г. 15:06:00