web-dev-qa-db-ja.com

要素セレクターでtinyMCEエディターインスタンスを取得するにはどうすればよいですか？

AJAXリクエストで作成されたtinyMCEエディターのコンテンツを設定します。ページにいくつかのエディターがあります。それらはすべて次のように初期化されます。

tinymce.init({
        selector: '.tiny-mce'
    });

各エディターには、クラスを相互に分離するための個別のクラスがあります。 AJAXリクエストでデータを取得した後、このクラスを使用してコンテンツを特定のエディターに設定するにはどうすればよいですか？

tinyMCE.get('.class_name') // returns null

私はAPIとSOを検索していて、そのような単純なことを行う関数を見つけることができません。

編集：

エディターのインスタンスを取得するためのクリーンな方法が見つかりませんでした。 tinyMCEが作成されたとき、要素にエディター名のIDが追加されました。今、私はこのようなことをすることができます：

var id = $('.class_name').attr('id');
tinyMCE.get(id).setContent('new content');

しかし、もっと良い方法はありますか？

javascriptjquerytinymce
12
Boykodev

get() AP​​Iごとに、その呼び出しに渡す文字列は[〜＃〜] id [〜＃〜]である必要がありますクラスではなく、エディター要素の。

https://www.tinymce.com/docs/api/class/tinymce/#get

したがって、IDに基づいてエディターをターゲットにする場合は、次のようなものが必要です。

_<textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>    
_

...そしてあなたのJavaScriptではこのようなもの...

_tinymce.get('editor2').setContent('...content here...');
_

ページにエディターが1つしかない場合も使用できます

_tinymce.activeEditor.setContent('...content here...');
_

EDIT：呼び出すエディターのライフサイクルのwhenによって異なりますget()またはactiveEditorメソッド。

TinyMCEが完全に初期化されるまで、これらは何も返しません。次のようなコードがある場合：

_<form method="post" action="dump.php">
    <textarea class='tiny-mce' id='editor1'></textarea>
    <textarea class='tiny-mce' id='editor2'></textarea>  
</form>
<script>
    tinymce.get('editor2').setContent("content here");
</script>
_

JavaScriptの実行中にTinyMCEがtextareasの初期化を完了したかどうかわからないため、これは通常失敗します。このフィドルを見てください：

http://fiddle.tinymce.com/gufaab/1

コンテンツをエディターにロードする最良の方法は、エディター独自の「init」コールバックを使用してコードをそこに配置することです。例えば：

_tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init', function () {
             this.setContent('The init function knows on which editor its called - this is for ' + editor.id);
        });
    } 
}); 
_

...各エディタ（複数ある場合）ごとにinitが呼び出され、必要に応じてDOMのエディタオブジェクトにアクセスできることに注意してください。

16
Michael Fromin

セレクターでidを使用して、エディターがコールバック関数で初期化された後にコンテンツを設定できます。

tinymce.init({
        selector: 'textarea#tinymce1',
init_instance_callback : function(){
tinymce.get('tinymce1').setContent(data)
}
});

これはhtmlです

<textarea id="tinymce1"></textarea>

init_instance_callbackを使用します。これは、ajaxリクエストでコンテンツを設定した場合、エディターの初期化よりも高速になるためです。

2
Ruggero