web-dev-qa-db-ja.com

作り方 WP JavaScriptを使用したエディタ

私はある種の繰り返されたフィールドを作成しようとしています、そしてそのために、私はいくつかのユニークなIDを持つ新しいwpエディタを作成したいです。

だから私の質問は任意のjsを使用してwp_editorを作成する方法はありますか？ <?php wp_editor() ?> WordPress関数を使うのと同じです。

使ってみました

tinyMCE .init( { mode : "exact" , elements : "accordion_icon_description_"+response.success.item_count });

それは私がWordPressのポストコンテンツフィールドエディタと同じではないと思うです非常に基本的なエディタを印刷します

postsjavascripteditorpost-content
2
1naveengiri

のおかげでJacob Peattieのコメント 私はJSでしか答えられない。実際には似たようなことをしましたが、4.8より前ではそれは簡単ではなかったので、最後にwp_editor()を使いました。しかし今、あなたはそうすることができます JavaScriptのwp.editorオブジェクトを使う 。主な機能は3つあります

  1. wp.editor.initialize = function( id, settings ) {

idはどこにありますか

エディタに使用されるテキストエリアのHTML ID。 jQueryに準拠している必要があります。大括弧、特殊文字などはありません。

そしてsettingsはどちらかのオブジェクトです

{
    tinymce: {
        // tinymce settings
    },
    quicktags: {
        buttons: '..'
    }
}

これらの TinyMCE設定で 。 3つのオブジェクト（settings自体、tinymceまたはquicktags）の代わりに、デフォルトを使用するためにtrueを使用できます。

  1. wp.editor.remove = function( id ) {

一目瞭然です。 wp.editor.initializeによって作成されたエディタインスタンスを削除します。

  1. wp.editor.getContent = function( id ) {

wp.editor.initializeで作成したエディタの内容を入手してください。

使い方はこんな感じ

var countEditors = 0;
$(document).on('click', 'button#addEditor', function() {
    var editorId = 'editor-' + countEditors;
    // add editor in HTML as <textarea> with id editorId
    // give it class wp-editor
    wp.editor.initialize(editorId, true);
    countEditors++;
});
$(document).on('click', 'button.removeEditor', function() {
   // assuming editor is under the same parent
   var editorId = $(this).parent().find('.wp-editor');
   wp.editor.remove(editorId);
});

コンテンツは自動的に投稿されるので、この例では必要ありません。しかし、あなたはいつでもwp.editor.getContent( editorId )を通してそれを検索することができます

5
kero

エディタスクリプト、スタイルシート、デフォルト設定を出力するには、最初にwp_enqueue_editor();を使う必要があります。これはここで文書化されています wp_enqueue_editor（）

あなたはそのように関数からtrueを削除する必要があります：wp.editor.initialize(editorId);

1
Antonio Novak