The NoteBook of EricKong
          
				
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁(yè) ::
聯(lián)系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				611 
				Posts ::
				1 Stories
				::
				190 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		
          最近準(zhǔn)備在自己的一個(gè)項(xiàng)目中使用開(kāi)源的web編輯器TinyMce，遇到了程序獲取設(shè)置TineMce編輯器內(nèi)容的問(wèn)題。用google搜索到了一些眉目，先總結(jié)如下。
          

          1.先講怎么設(shè)置TinyMce編輯器的內(nèi)容
          
    （1）如果在初始化編輯器之前，已經(jīng)給編輯器所處的控件設(shè)置了內(nèi)容，那么TinyMce在初始化的時(shí)候，會(huì)自動(dòng)獲取控件的內(nèi)容。
          
    （2）在客戶端可以用下面的函數(shù)來(lái)隨時(shí)獲取內(nèi)容：
          

              <script language="javascript" type="text/javascript">
          
    <!--
          
        //功能：獲取TinyMce編輯器的內(nèi)容
          
        //參數(shù)：editorId——編輯器的id
          
        //返回：內(nèi)容字符串；如果失敗，返回空字符串
          
        function GetTinyMceContent(editorId)
          
        ...{
          
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
          
        }
          
       
          
        //功能：設(shè)置TinyMce編輯器的內(nèi)容
          
        //參數(shù)：editorId——編輯器的id
          
        //        content——內(nèi)容
          
        //返回：（無(wú)）
          
        function SetTinyMceContent(editorId,content)
          
        ...{
          
            tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
          
        }
          
    //-->
          
</script>
          
2.我們?cè)賮?lái)看看如何獲取TinyMce編輯器的內(nèi)容
          
    （1）在頁(yè)面提交（即執(zhí)行Submit()）之后，TinyMce會(huì)自動(dòng)將內(nèi)容寫(xiě)入到控件中。
          
    （2）在客戶端還可以用下面的函數(shù)來(lái)隨時(shí)獲取編輯器的內(nèi)容
          


          
<script language="javascript" type="text/javascript">
          
    <!--
          
        //功能：獲取TinyMce編輯器的內(nèi)容
          
        //參數(shù)：editorId——編輯器的id
          
        //返回：內(nèi)容字符串；如果失敗，返回空字符串
          
        function GetTinyMceContent(editorId)
          
        ...{
          
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
          
        }
          
    //-->
          
</script>
          
3.下面是一個(gè)完整的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" "

          <html xmlns="
<head runat="server">
          
    <title>無(wú)標(biāo)題頁(yè)</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測(cè)試頁(yè)面<br />
          
        <textarea id="edt1" rows="6" cols="20">這是第一個(gè)編輯框</textarea><br />
          
        <asp:TextBox ID="edt2" TextMode="MultiLine" Text="這是第2個(gè)編輯框" 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='這是測(cè)試<b>內(nèi)</b>容設(shè)置';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編輯器的內(nèi)容
          
        //參數(shù)：editorId——編輯器的id
          
        //返回：內(nèi)容字符串；如果失敗，返回空字符串
          
        function GetTinyMceContent(editorId)
          
        {
          
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
          
        }
          
       
          
        //功能：設(shè)置TinyMce編輯器的內(nèi)容
          
        //參數(shù)：editorId——編輯器的id
          
        //        content——內(nèi)容
          
        //返回：（無(wú)）
          
        function SetTinyMceContent(editorId,content)
          
        {
          
            tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
          
        }
          
    //-->
          
    </script>
          
</body>
          
</html>
          

	
          
	
	

          







          
	    
    


          
	
          Feedback
          
		
		
				
          			
					
          
						# re: 如何獲取和設(shè)置TinyMce編輯器的內(nèi)容
						
								2014-07-21 09:24
						
						12
					
          
					
				
          
				
          
			

          




          








          

				

          

          




    







          
        
	




主站蜘蛛池模板：
冕宁县|
东乡族自治县|
韶山市|
侯马市|
延川县|
景德镇市|
塔河县|
体育|
罗江县|
县级市|
阜宁县|
古田县|
东兰县|
英吉沙县|
治县。|
武定县|
平泉县|
凤城市|
和平区|
扶余县|
铁岭县|
石楼县|
灌云县|
朝阳县|
车致|
抚顺县|
鹰潭市|
寻乌县|
松桃|
渭南市|
德令哈市|
丰台区|
荣昌县|
边坝县|
青浦区|
仁怀市|
清涧县|
伽师县|
高要市|
保亭|
广水市|