如何从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()

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

有人有主意吗？

- Ikes

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> 

- yb007

---

非常感谢您的帮助。解释得非常清楚，我现在明白了 :) - Ikes

Answer 2

也许是这个原因？你的变量名是tinyMCE，但是你却在tinymce上调用了getContent()。JS区分大小写 ;)

- Miha Rekar

Answer 3

TinyMCE在格式“＃textareaid”+“_ifr”下创建一个iframe。因此，通过使用jQuery，我们可以查询您喜欢的文本区域的HTML内容。

iframe id将是您的textarea Id，并附加“_ifr”。因此，您可以从TinyMCE提取HTML内容。

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

- Sathya Narayanan

Answer 4

我正在寻找一个解决方案，尝试了上述一些方法，然后在tinymce文档中继续查找，发现这个方法是有效的。
使用 TinyMCE 4

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

只需在onclick事件中调用该函数，查看结果即可...
我的来源是： http://www.tinymce.com/wiki.php/api4:class.tinymce.ContentEvent

- Joe