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

Я не уверен, почему я не смог найти это, но кто-нибудь знает, как получить информацию от редактора TinyMCE? Я использую его во внешнем интерфейсе и хочу иметь возможность сохранить все, что пользователь ввел в TinyMCE, в базу данных, но не могу найти лучший способ получить это значение.

Два решения, которые я реализовал с некоторым успехом:

1. tinyMCE.activeEditor.getContent(); - Этот, кажется, получает только значение визуального редактора, поэтому, если я нахожусь в редакторе HTML и внесу изменения, а затем сохраню, они не будут обнаружены.

2. $('#html_text_area_id').val(); - Это противоположность, это только кажется, чтобы получить значение редактора HTML.

Я знаю, что есть лучший способ - я просто не могу найти его ...

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

Хорошо, по-видимому, WordPress отслеживает, какой тип редактора (визуальный или HTML) активен как класс, который добавляется в оболочку содержимого, так что вот решение, которое даст вам новейший контент в редакторе.

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}

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

// Find and loop through all TinyMCE editors.
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 the editor is in "visual" mode then we need to do something.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Saves the contents from a editor out to the textarea:
        editor.save();
    }
});

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

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

Где описание - это идентификатор редактора tinymce и де-код после остального принятого ответа, у меня не сработало.

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

Во-первых, я добавил обратный вызов для wp-фильтра tiny_mce_before_initв моем файле functions.php, это позволило мне добавить функцию обратного вызова js, которая будет запускаться при инициализации редакторов:

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

/**
 * Filter cb to add event listeners to tinymce editor.
 * @param  array $init An array of setup js functions as strings.
 * @return array       Returns new array of js function strings.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //not required, I use it as flag to check if on correct page
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

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

  /**
   * Get the content of the tinyMCE editor.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Returns the content
   */
  function get_tinymce_content(){

    //change to name of editor set in 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();
    }

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

Это адаптивное решение , основанное на Bainternet «s ответ . Возможно, есть и другие лучшие способы сделать это, но этот работал хорошо для меня.

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

  /// Fires when an editor is added to the EditorManager collection.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Документация о событиях TinyMCE 'additor'