如何获取和设置TinyMce编辑器的内容
发布网友
发布时间：2022-04-22 04:13
共2个回答
热心网友
时间：2022-04-21 08:57
最近准备在自己的一个项目中使用开源的web编辑器TinyMce，遇到了程序获取设置TineMce编辑器内容的问题。用google搜索到了一些眉目，先总结如下。
1.先讲怎么设置TinyMce编辑器的内容
（1）如果在初始化编辑器之前，已经给编辑器所处的控件设置了内容，那么TinyMce在初始化的时候，会自动获取控件的内容。
（2）在客户端可以用下面的函数来随时获取内容：
<script language="javascript" type="text/javascript">
<!--
//功能：获取TinyMce编辑器的内容
//参数：editorId——编辑器的id
//返回：内容字符串；如果失败，返回空字符串
function GetTinyMceContent(editorId)
...{
return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
}
//功能：设置TinyMce编辑器的内容
//参数：editorId——编辑器的id
// content——内容
//返回：（无）
function SetTinyMceContent(editorId,content)
...{
tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
}
//-->
</script>
2.我们再来看看如何获取TinyMce编辑器的内容
（1）在页面提交（即执行Submit()）之后，TinyMce会自动将内容写入到控件中。
（2）在客户端还可以用下面的函数来随时获取编辑器的内容
<script language="javascript" type="text/javascript">
<!--
//功能：获取TinyMce编辑器的内容
//参数：editorId——编辑器的id
//返回：内容字符串；如果失败，返回空字符串
function GetTinyMceContent(editorId)
...{
return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
}
//-->
</script>
3.下面是一个完整的asp.net例子：
为了使用该示例，您必须下载有TinyMce，并放置在目录“tiny_mce”中。
<%@ Page Language="C#" CodeFile="TinyMceTest.aspx.cs" Inherits="TinyMceTest" validateRequest=false %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,|,code",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
flash_external_list_url : "example_flash_list.js",
media_external_list_url : "example_media_list.js",
template_external_list_url : "example_template_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
nonbreaking_force_tab : true,
apply_source_formatting : true,
template_replace_values : {
username : "Jack Black",
staffid : "991234"
}
});
</script>
<!-- /tinyMCE -->
</head>
<body>
<form id="form1" runat="server">
<div>
TinyMce测试页面<br />
<textarea id="edt1" rows="6" cols="20">这是第一个编辑框</textarea><br />
<asp:TextBox ID="edt2" TextMode="MultiLine" Text="这是第2个编辑框" runat="server" Height="79px"></asp:TextBox>
<br />
<input type="button" id="btnGetContent" value="Get Content" onclick="alert(GetTinyMceContent('edt1'))" />
<input type="button" id="btnSetContent" value="Set Content" onclick="var cnt='这是测试<b>内</b>容设置';alert(cnt);SetTinyMceContent('edt2',cnt);" />
<asp:Button ID="btnSubmit" runat="server" Text="Button" OnClick="btnSubmit_Click" />
</div>
</form>
<script language="javascript" type="text/javascript">
<!--
//功能：获取TinyMce编辑器的内容
//参数：editorId——编辑器的id
//返回：内容字符串；如果失败，返回空字符串
function GetTinyMceContent(editorId)
{
return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
}
//功能：设置TinyMce编辑器的内容
//参数：editorId——编辑器的id
// content——内容
//返回：（无）
function SetTinyMceContent(editorId,content)
{
tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
}
//-->
</script>
</body>
</html>
