首页 > 其他分享> 文章详细

富文本编辑器tinymce获取文本内容和设置文本内容

2022-09-16 17:30:39 阅读：230 来源： 互联网

标签：文本编辑 tinymce content 编辑器内容 activeEditor var 文本

1、如果当前页面只有一个编辑器：

获取内容：tinyMCE.activeEditor.getContent()

设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：

获取内容：tinyMCE.editors[0].getContent()

设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

3、获取不带HTML标记的纯文本内容：

var activeEditor = tinymce.activeEditor;

var editBody = activeEditor.getBody();

activeEditor.selection.select(editBody);

var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );

取到的 text 即为纯文本内容。

4、当多个编辑器中包含多个编辑器时获取值

//富文本绑定的id

<#list contents as e>
    <div class="content-group" name="content_${e.id}">
        <input type="hidden" name="contentId" value="${e.id}"/>
        <div style="font-size: 22px;">${e.group.name}</div>
   
        <div class="layui-form-item layui-form-text">
            <div class="layui-inline" style="width: 45%;">
                <label for="name" class="layui-form-label" style="width: 100%;">内容</label>
                <div class="layui-input-block" style="margin-left: 0px;width: 100%;">
                    <textarea id="content_${e.id}_1" name="content">${e.content}</textarea>
                </div>
            </div>
            <div class="layui-inline" style="width: 45%;">
                <label for="name" class="layui-form-label"style="width: 100%;">要求</label>
                <div class="layui-input-block" style="margin-left: 0px;width: 100%;">
                    <textarea id="content_${e.id}_2" name="requirement">${e.requirement}</textarea>
                </div>
            </div>
        </div>
    </div>
</#list>

//富文本编辑器

<#list contents as e>
<#list 1..2 as i>
tinymce.init({
    selector: "#content_${e.id}_${i}",
    branding: false,
    language: 'zh_CN',
    menubar:false,
    statusbar: false,
    height: 200,
    powerpaste_allow_local_images: true,
    powerpaste_word_import: 'prompt',
    powerpaste_html_import: 'prompt',//图片粘贴
})

</#list>
</#list>
//获取富文本中的内容

    var contentList = [];
    $(".content-group").each(function(index){
        var _This = $(this);
        var content = {}
        content.id = _This.find("input[name='contentId']").val();
        content.planContent = tinymce.get('content_'+content.id+'_1').getContent();
        content.requirement = tinymce.get('content_'+content.id+'_2').getContent();
        contentList.push(content);
    });
    var tempJson = JSON.stringify(contentList);
    data.field.tempJson = tempJson

标签：文本编辑,tinymce,content,编辑器,内容,activeEditor,var,文本
来源： https://www.cnblogs.com/guyiyi/p/16700680.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

富文本编辑器tinymce获取文本内容和设置文本内容