Как получить содержимое редактора TinyMCE при использовании на фронтенде?

Это код, который я добавил в свой JavaScript, прямо перед отправкой формы.

// Находим и перебираем все редакторы TinyMCE.
jQuery('#the-form').find( '.wp-editor-area' ).each(function() {
    var id = jQuery( this ).attr( 'id' ),
        sel = '#wp-' + id + '-wrap',
        container = jQuery( sel ),
        editor = tinyMCE.get( id );

    // Если редактор находится в режиме "визуального" редактирования, нужно выполнить действия.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Сохраняет содержимое редактора в текстовое поле:
        editor.save();
    }
});

Это сработало для меня:

if (jQuery("#wp-description-wrap").hasClass("tmce-active")){
    description1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    description1 = jQuery('[name="description"]').val();

Где description — это ID редактора TinyMCE, а код после else из принятого ответа не сработал для меня.

Мне потребовалось гораздо больше кода, чтобы заставить это работать, также я получал ошибку JavaScript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..). Это было вызвано обновлением WordPress с версии 3.x до 4. Поэтому мне пришлось сначала очистить кеш браузера.

Сначала я добавил callback-функцию к фильтру WP tiny_mce_before_init в файле functions.php, что позволило мне добавить js callback-функцию, которая будет вызываться при инициализации редакторов:

add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );

/**
 * Callback фильтра для добавления обработчиков событий к редактору TinyMCE.
 * @param  array $init Массив строк с js функциями для настройки.
 * @return array       Возвращает новый массив строк с js функциями.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //необязательно, я использую это как флаг для проверки правильной страницы
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

Далее идет javascript-функция для выполнения любых действий с контентом при его изменении. Добавьте этот javascript с помощью wp_enqueue_scripts на нужную вам страницу.

  /**
   * Получает содержимое редактора TinyMCE.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Возвращает содержимое
   */
  function get_tinymce_content(){

    //замените на имя редактора, указанное в wp_editor()
    var editorID = 'my_editor_id';

    if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
        var content = tinyMCE.get(editorID).getContent({format : 'raw'});
    else
        var content = jQuery('#'+editorID).val();

    console.log(content);
}

Код заработал, когда я использовал следующее для вывода редактора на любую страницу:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>

Вы можете получить содержимое в зависимости от текущего режима редактора.

function get_tinymce_content()
    {
    if (jQuery(".switch-tmce").css('background-color')=='rgb(245, 245, 245)')
        return tinyMCE.activeEditor.getContent();
    else
        return jQuery('#html_text_area_id').val();
    }

Вкладка Визуальный имеет класс switch-tmce, который вы можете использовать для её идентификации. Вы узнаете, что она активна, по более светлому цвету фона. Таким образом, вы можете использовать это для определения, какая из двух вкладок активна.

Это адаптивное решение на основе ответа от Bainternet. Вероятно, существуют и другие, более совершенные способы, но этот вариант хорошо сработал у меня.

Вы также можете использовать событие addeditor:

  /// Срабатывает, когда редактор добавляется в коллекцию EditorManager.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Документация по событию 'addeditor' в TinyMCE