如何获取和设置TinyMce编辑器的内容

    最近准备在自己的一个项目中使用开源的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# "  AutoEventWireup = " true "  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 >