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