フロントエンドで使用するときにTinyMCEエディターの入力を取得するにはどうすればよいですか？

なぜこれを見つけられなかったのか分かりませんが、TinyMCEエディターの入力を取得する方法を誰かが知っていますか？私はそれをフロントエンドで使用しており、ユーザーがTinyMCEに入力したものをすべてデータベースに保存できるようにしたいのですが、その値を取得するための最良の方法を見つけることができません。

いくつかの成功を収めて実装した2つのソリューションは次のとおりです。

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エディタとデコードのIDで他の受け入れ答えの、私のために動作しませんでした。

動作させるにはさらに多くのコードが必要であり、JavaScriptエラーも発生していました。Deprecated TinyMCE API call: <target>.onKeyUp.add(..)これは、WordPressが3.xから4にアップグレードされたために発生しましたclear my browser cache。

まずtiny_mce_before_init、functions.phpファイルのwpフィルターにコールバックを追加しました。これにより、エディターが初期化されたときに呼び出される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関数は、コンテンツが変更されたときに、コンテンツで必要なことを実行します。wp_enqueue_scriptsを使用して、このJavaScriptを必要なページに追加します。

  /**
   * 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();
    }

「ビジュアル」タブにはswitch-tmce、タブとして識別するために使用できるクラスがあります。背景色が明るい場合は、フォーカスされていることがわかります。したがって、これを使用して、2つのタブのどちらがアクティブかを判別することもできます。

これはBainternetの回答に基づく適応ソリューションです。おそらく他のより良い方法があるでしょうが、これは私にとってはうまくいきました。

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 'addeditor'イベントドキュメント