2012-12-24 133 views
14

我是Javascript/TinyMCE的初学者,我试图理解如何从编辑器获取HTML内容,并用简单的alert()函数显示它。如何从TinyMCE编辑器中提取HTML内容

我有这种极简的配置我的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 Website,他们解释说,我必须这样做:

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

而且here

tinymce.activeEditor.getContent() 

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

有人有想法吗?

回答

21

我不知道为什么它不工作

因为

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> 
+0

非常感谢您的帮助。这是很好解释,我现在明白了:) – Ikes

2

也许是这样吗?您的变量是tinyMCE,但您致电tinymcegetContent()。 JS是区分大小写;)

1

我正在寻找一个解决方案,并尝试了一些以上,然后看更多关于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

0

TinyMCE的创建格式为'#textareaid'+'_ ifr'的iframe因此,通过使用jquery,我们可以查询您喜欢的文本区域的HTML内容

iframe ID将是您的textarea ID,并附上“_ifr”。因此,您可以从tinyMce提取HTML内容

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