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

本文介绍如何在TinyMCE编辑器中设置和获取内容,包括客户端JavaScript函数的实现方法。提供了完整的ASP.NET示例代码,演示了如何初始化TinyMCE编辑器、设置编辑器内容以及获取编辑器内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    最近准备在自己的一个项目中使用开源的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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值