web-dev-qa-db-ja.com

Wp_editor（）なしでTinyMCEを表示する方法

私はプラグインのプロバージョンから、フロントエンドのテキストエリアのためにWordPressのtinyMCEエディタを有効にしようとしています。

私は一時的にbogusの方法で問題を解決しました：

無料版では：

wp_editor(
   $details_val,    //content
   'pre-details',   //editor ID
   array('tinymce'=>false),
);

それからプロバージョンから、フィルタフックで、trueに 'tinymce'値を作りました。ハハハ...

実行可能な解決策が必要

これがフロントエンドの私のtextareaです。

<textarea class="tinymce-enabled" rows="5" cols="40" name="pre_details" id="pre-details"><?php echo $details_val; ?></textarea>

私はjQueryで次の機能を試してみました：

jQuery(document).ready(function($) {
    tinymce.init({
        selector :"pre-details",
        mode : "specific_textareas",
        theme : "simple",
        editor_selector :"tinymce-enabled"
    });
});

そしてファイルは次のように呼ばれます。

function pre_scripts() {
    if( is_page('xyz') ) {
        wp_enqueue_script( 'pre-scripts', Pre()->plugin_url() .'/assets/js/pre-scripts.min.js', array('jquery', 'tiny_mce'), Pre()->version, true );
    }
}
add_action( 'wp_enqueue_scripts', 'pre_scripts' );

まず第一に、'tiny_mce'依存関係を使用しない場合、tinymce.init()はそのような関数を見つけられないというエラーを示しますが、私のカスタムスクリプトはロードされます。しかし、'tiny_mce'依存関係を追加した場合、私のカスタムスクリプトはロードされません。しかし、フックは devのリソースに記載されています 。

私は このWPSEスレッドを見つけました 、それは古くからの問題であることを示唆しています。しかし、そこに示されている回避策は私の問題を解決しません。

私はまた異なるバージョンを試してみました：

$(function() {
   $('textarea.tinymce-enabled').tinymce({
        mode : "specific_textareas",
        theme : "simple", 
   });
});

そして

tinyMCE.execCommand('mceAddControl', false, 'pre-details');

しかし、運はありません。その依存関係が私のスクリプトをデキューするので、
または、Tinymceコアスクリプトをロードする代替方法が私のスクリプトに準拠していません。

wp_editor()を使わずに、プラグイン可能な方法でWordPressのtinyMCEリッチテキストエディタをフロントエンドのテキストエリアにロードするにはどうすればいいですか？

front-endvisual-editorwp-editor
6
Mayeenul Islam

あなたがフロントエンドにwp_editorを必要としないならば、私はそれが大丈夫だと思います。ここであなたのtinymce initを使った少し異なるオプション設定。フロントエンドではwp_editorなしでこれを使います。

<script>
jQuery( document ).ready( function( $ ) {
    tinymce.init( {
        mode : "exact",
        elements : 'pre-details',
        theme: "modern",
        skin: "lightgray",
        menubar : false,
        statusbar : false,
        toolbar: [
            "bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
        ],
        plugins : "paste",
        paste_auto_cleanup_on_paste : true,
        paste_postprocess : function( pl, o ) {
            o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, " " );
        }
    } );
} );
</script>

コンテンツを取得する

tinymce.get('pre-details').getContent()

WP function wp_enqueue_scripts に

wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );

あなたはあなたのスタイルのeditor.min.cssをエンキューすることができます。

9
Jevuska