如何通過元素選擇器獲取tinyMCE編輯器實例？

我想在使用AJAX請求創建tinyMCE編輯器後設置其內容。我在頁面上有幾位編輯。所有它們都被初始化爲：如何通過元素選擇器獲取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');

但是有沒有更好的方法？

來源

2016-04-03 Boykodev

根據get() API，您傳遞給該調用的字符串必須是編輯器元素的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...');

如果你只在頁面上有一個編輯器，你也可以使用

tinymce.getActiveEditor().setContent('...content here...');

編輯：這取決於當在編輯器中的生命週期，你要撥打的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>

這通常會失敗，因爲你如果TinyMCE的結束時，你的JavaScript運行初始化的textareas不知道。請參閱此琴：

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

將內容加載到編輯器的最佳方法是使用編輯器自己的「初始化」回調，並把你的代碼在那裏。例如：

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。

來源

2016-04-03 14:47:36

使用ID而不是類 - 得到它！謝謝！ – Boykodev

實際上，您的方法不起作用。通過元素ID訪問tinyMCE會返回null。 – Boykodev

@Boykodev - 請參閱我的文章的更新。 **當你調用這些方法時很重要 - 如果你知道自己的ID是正確的，那麼它返回null，你可能會在編輯器初始化並準備好進行交互之前調用它。有些API可以用來解決這個問題。 –

您可以選擇使用id和編輯器與回調函數初始化後，設置內容：

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

這是HTML

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

使用init_instance_callback因爲如果你設置的內容與ajax請求它可以比編輯器的初始化更快

來源

2016-04-06 17:48:36 Ruggero

-1

當您使用id選擇器而不是class se時，TinyMCE會更好地工作講師。您可以使用init_instance_callback在編輯器初始化時設置您的內容。

這隻適用於如果你有一個id選擇器。

HTML：

<textarea id="editor1"></textarea>

JS：

tinymce.init({ 
    selector: 'textarea#editor1', 
    init_instance_callback: function (editor) { 
    editor.setContent("content here"); 
    } 
});

function setContent(editor) { 
    editor.setContent("content here"); 
} 

tinymce.init({ 
    selector: 'textarea#editor1', 
    init_instance_callback: setContent 
});

來源

2016-04-13 07:04:28 dayota

如何通過元素選擇器獲取tinyMCE編輯器實例？

回答

相關問題