Javascript 如何从 TinyMCE 编辑器中提取 HTML 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14023323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extract HTML content from TinyMCE Editor
提问by Ikes
I'm a beginner on Javascript/TinyMCE and I try to understand how is it possible to get the HTML content from the editor, and show it with a simple alert() function.
我是 Javascript/TinyMCE 的初学者，我试图了解如何从编辑器中获取 HTML 内容，并使用简单的 alert() 函数显示它。
I've this minimalist config on my HTML page :
我的 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>
On the TinyMCE Website, They explained that i have to use this :
在TinyMCE 网站上，他们解释说我必须使用它：
// Get the HTML contents of the currently active editor
console.debug(tinyMCE.activeEditor.getContent());
And heretoo
而这里太
tinymce.activeEditor.getContent()
I don't know why it doesn't work
我不知道为什么它不起作用
Someone have an idea ?
有人有想法吗？
回答by yb007
I don't know why it doesn't work
我不知道为什么它不起作用
It's not working because
它不起作用，因为
console.debug(tinyMCE.activeEditor.getContent());
tinymce.activeEditor.getContent();
these statements are not being executed.
这些语句没有被执行。
Try to follow this FIDDLE....
尝试按照此FIDDLE....
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "mceEditor"
});
Function for getting content ....
获取内容的功能....
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());
}
Get the content of editor on button click ...
单击按钮获取编辑器的内容...
<button onclick="get_editor_content()">Get content</button>
回答by Miha Rekar
Maybe it's the case? Your variable is tinyMCE, but you are calling getContent()on tinymce. JS is case sensitive ;)
也许是这样？你的变量tinyMCE，但你打电话getContent()的tinymce。JS 区分大小写 ;)
回答by Joe
I was looking for a solution and tried some of the above then went looking more on the tinymce documentation and found this to be effective.
Using the tiny mce 4
我正在寻找解决方案并尝试了上述一些方法，然后在 tinymce 文档中查找了更多内容，发现这很有效。
使用微型 mce 4
function getHTML()
{
tinymce.activeEditor.on('GetContent', function(e) {
console.log(e.content);
});
}
just call that function with an onclick and see what the results are...
My source is:
http://www.tinymce.com/wiki.php/api4:class.tinymce.ContentEvent
只需使用 onclick 调用该函数，看看结果是什么......
我的来源是：http: //www.tinymce.com/wiki.php/api4:
class.tinymce.ContentEvent
回答by Sathya Narayanan
TinyMCE creates an iframe under the format '#textareaid'+'_ifr' So by using jquery we can query the HTML contents of the text area you like
TinyMCE创建了一个格式为'#textareaid'+'_ifr'的iframe，所以通过jquery我们可以查询到你喜欢的文本区域的HTML内容
the iframe id will be your textarea Id with "_ifr" appended to that. So you can extract HTML contents from tinyMce
iframe id 将是您的 textarea id，并附加了“_ifr”。所以你可以从 tinyMce 中提取 HTML 内容
$('#textareaId_ifr').contents().find("html").html();
