如何從TinyMCE編輯器中提取HTML內容

Question

我是Javascript / TinyMCE的初學者，我試着理解如何從編輯器中獲取HTML內容，並使用簡單的alert（）函數顯示它。

我在HTML頁面上有這個極簡主義配置：

<div id="tiny">
<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "specific_textareas",
        editor_selector : "mceEditor"
});
</script>
</div>

<form method="post" action="somepage">
        <textarea id="myarea1" class="mceEditor">This will be an editor.</textarea>
</form>

在TinyMCE網站上 ，他們解釋說我必須使用這個：

// Get the HTML contents of the currently active editor
console.debug(tinyMCE.activeEditor.getContent());

在這里也是

tinymce.activeEditor.getContent()

我不知道為什么它不起作用

有人有想法嗎？

Answer 1

我不知道為什么它不起作用

它不起作用，因為

console.debug(tinyMCE.activeEditor.getContent());

tinymce.activeEditor.getContent();

這些陳述沒有被執行。

嘗試遵循這個FIDDLE ....

tinyMCE.init({
        // General options
        mode : "specific_textareas",
        editor_selector : "mceEditor"
});

獲取內容的功能....

function get_editor_content() {
  // Get the HTML contents of the currently active editor
  console.debug(tinyMCE.activeEditor.getContent());
  //method1 getting the content of the active editor
  alert(tinyMCE.activeEditor.getContent());
  //method2 getting the content by id of a particular textarea
  alert(tinyMCE.get('myarea1').getContent());
}

點擊按鈕獲取編輯器的內容...

<button onclick="get_editor_content()">Get content</button> 

Answer 2

也許是這樣的？ 你的變量是tinyMCE ，但是你在tinymce上調用了getContent() 。 JS區分大小寫;）

Answer 3

我正在尋找一個解決方案，嘗試了上面的一些，然后更多地查看tinymce文檔，發現這是有效的。
使用微小的mce 4

function getHTML()
{
   tinymce.activeEditor.on('GetContent', function(e) {
     console.log(e.content);
   });
}

只需用onclick調用該函數，看看結果是什么......
我的來源是： http ： //www.tinymce.com/wiki.php/api4 ： class.tinymce.ContentEvent

Answer 4

TinyMCE以'#textareaid'+'_ ifr'格式創建iframe所以通過使用jquery我們可以查詢你喜歡的文本區域的HTML內容

iframe id將是您的textarea Id，並附加“_ifr”。 因此，您可以從tinyMce中提取HTML內容

$('#textareaId_ifr').contents().find("html").html();