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

最新推荐文章于 2024-12-31 14:13:54 发布
原创 最新推荐文章于 2024-12-31 14:13:54 发布 · 1w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#tinymce #javascript #button #server #list #url

本文介绍如何在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>
富文本编辑器tinymce的常用配置
永乐的博客
07-01 1009
主要是记录tinymce富文本编辑器中一些常用配置的使用方法
在 Vue 项目中引入 tinymce 富文本编辑器
liuqing_1的博客
08-12 920
在 Vue 项目中引入 tinymce 富文本编辑器
获取tinyMCE编辑器中的内容
热门推荐
学而不思则罔 思而不学则殆
09-19 2万+
有时候需要验证tinyMCE编辑器中的内容是否符合规范（不为空） 就需要获取里面的内容。 1、如果当前页面只有一个编辑器： 获取内容：tinyMCE.activeEditor.getContent() 设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）： 获取内容：t
tinymce 获取/设置内容
寂寥人生
07-02 1800
获取 tinyMCE.activeEditor.getContent() editor.getContent(); //取纯文本 editor.getContent({'format':'text'}) 设置 editor.setContent('text'); tinyMCE.activeEditor.setContent('222');
获取和设置tinyMCE 4编辑器的内容
qq_23490959的博客
10-21 726
vue富文本编辑器
关于tinymce富文本编辑器获取文本内容和设置文本内容
yuzenan的博客
05-16 8258
1、一个编辑器： 获取内容：tinymce.activeEditor.getContent() 设置内容：tinymce.activeEditor.setContent(“需要设置的编辑器内容”) 2、多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）： 获取内容：tinymce.editors[0].getContent() 设置内容：tinymce.editors[0].set...
TinyMCE编辑器(HTML编辑器) v4.1.5 中文官方版.zip
03-26
这个编辑器可工作在Mozilla, firefox和MSIE上.很多网站系统都采用了 TinyMCE,其中包括 Wordpress。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用...
在vue3项目中使用tinymce编辑器
01-22
// 获取编辑器内容并更新数据 }); }, content: this.content, // 初始化编辑器内容 }); }, // ... ``` 这样，当编辑器内容变化时，Vue的数据模型也会同步更新。 以上就是在Vue3项目中使用带有汉化包的...
TinyMCE富文本编辑器资源包
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
tinymce编辑器组件
07-04
Tinymce编辑器组件是一款强大的富文本编辑工具，广泛应用于网页内容编辑、CMS系统以及各种Web应用程序中。它提供了丰富的功能，使用户能够像在桌面环境下一样编辑文本，创建复杂的HTML内容。下面我们将深入探讨...
vue项目中使用tinymce编辑器的步骤详解
10-18
fdcNote: "" // 初始化编辑器内容 } }; } }; // 在模板中使用 <tinymce :height="200" ref="editor" v-model="editForm.fdcNote"></tinymce> ``` 至此，你已经成功地在Vue项目中集成了TinyMCE富文本编辑器，并...
获取tinymce富文本框内容长度（纯字符、包含空格等）
Cheris_LT的博客
04-26 1621
话不多说，直接调用就知道了。
tinymce 设置和获取编辑器的内容
weixin_34148340的博客
07-27 995
$('目标元素').html(插入的内容) //设置tinymce编辑器的内容tinymce.get('目标元素').getContent() //获取tinymce编辑器的内容 转载于:https://www.cnblogs.com/guojikun/p/7244774.html...
得到tinymce富文本编辑中的内容
jklfjsdj79hiofo的专栏
09-12 2896
function submitfcn(form){        var myform = form[0];        var title = document.getElementById('id_title').value;        var content =  tinyMCE.getInstanceById('id_content').getBody().innerHTML;
tinymce 获取当前选区 获取选中文本
最新发布
lys20000913的博客
12-31 240
tinymce 获取当前选区 获取选中文本。
Vue3组件中如何获取已存在的TinyMCE实例并获取纯文本
前面的区域以后再来探索吧
07-18 995
然后获取纯文本部分的代码也比较简单，由于已经将编辑器存储在editor对象中，所以使用editor.getContent({ format: 'text' })即可获取不带html标签的纯文本内容（否则，如果在父组件中直接访问editorContent，得到的结果将带有<p>等标签，不利于进行后端文本处理）。额外说一下，这里我还用到了defineExpose方法，这样可以将子组件中声明的属性暴露给父组件，从而在父组件中使用getPlainText函数。组件库在初始化编辑器时，会将编辑器实例添加到。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值