web-dev-qa-db-ja.com

フロントエンドで使用するときにTinyMCEエディタの入力を取得する方法

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

私が実装した2つの解決策は、いくつかの成功を収めています。

  1. tinyMCE.activeEditor.getContent(); - これはビジュアルエディタの価値しか得られないようなので、私がHTMLエディタを使っていて変更を加えて保存しても、それらは拾われません。

  2. $('#html_text_area_id').val(); - これは正反対です。HTMLエディタの価値しか得られないようです。

もっと良い方法があることを私は知っています - 私はそれを見つけることができないようです...

p.sはい、私は人々がデータベースを破壊しないようにするためにセキュリティ対策を実施するつもりです。

tinymcewp-editor
8
Sam

そうですね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();
    }
}
22
Bainternet

これが、フォームが送信される直前に、私が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();
    }
});
1
Philipp

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の「追加者」のイベントドキュメント

0
Camille Descombes

私はそれを動かすためにもっと多くのコードを必要とし、そしてまたjavascriptエラーを得ていました：Deprecated TinyMCE API call: <target>.onKeyUp.add(..)これは3.xから4へのワードプレスアップグレードによって引き起こされました。だから私は最初にclear my browser cacheをしなければなりませんでした。

最初に私のfunctions.phpファイルの中のteh wp filter tiny_mce_before_initへのコールバックを追加しました、これは私がエディタが初期化されるとき発火される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"),
) ); ?>
0
Daithí

これは私のために働いた：

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

description は、受け入れられた回答の else の後の最短編集者のIDおよびdeコードです。

0
Alfredo Cebrián

エディタの現在のモードに応じて内容を取得できます。

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があり、これをタブとして識別するために使用できます。あなたはそれが明るい背景色を持っているならそれが焦点を当てられていることをご存知でしょう。そのため、これを使用して、2つのタブのどちらがアクティブかを判断することもできます。

これは Bainternet の answer に基づく適応型の解決策です。他にもっと良い方法があるかもしれませんが、これは私にとってはうまくいきました。

0
Abel Melquiades Callejo