HTML编辑器

一、页面效果

二、引入JS、CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <script th:src="@{/plugins/editor/tinymce.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-container" style="width: 100%;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">编辑器</blockquote>
            <div id="content"></div>
            <div class="layui-btn-container" style="margin-top: 10px">
                <button type="button" class="layui-btn layui-btn-primary" onclick="setcontent()">填入数据</button>
                <button type="button" class="layui-btn" onclick="getcontent()">读取数据</button>
                <button type="button" class="layui-btn layui-btn-normal" onclick="getbody()">获取纯文本</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script>
    $(function () {
        /**
         * 编辑器初始化
         */
        tinymce.init({
            selector: '#content', //容器，可使用css选择器
            language: 'zh_CN', //调用放在langs文件夹内的语言包
            toolbar: true, //工具栏
            menubar: true, //菜单栏
            branding: false, //右下角技术支持
            inline: false, //开启内联模式
            elementpath: false,
            min_height: 400, //最小高度
            height: 800,  //高度
            skin: 'oxide',
            toolbar_sticky: true,
            visualchars_default_state: true, //显示不可见字符
            image_caption: true,
            paste_data_images: true,
            relative_urls: false,
            // remove_script_host : false,
            removed_menuitems: 'newdocument',  //清除“文件”菜单
            plugins: "lists,hr, advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount", //依赖lists插件
            toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
            //选中时出现的快捷工具，与插件有依赖关系
            images_upload_url: '/upload/uploadFile', /*后图片上传接口*/ /*返回值为json类型 {'location':'uploads/jpg'}*/
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            }
        });
    })
</script>

三、数据操作

3.1 填入数据

  /*填入初始数据*/
//tinyMCE.activeEditor.setContent("<h1>测试</h1><hr><h2>这是测试的数据<h2>");
/*
1、如果当前页面只有一个编辑器：
    获取内容：tinyMCE.activeEditor.getContent()
    设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：
    获取内容：tinyMCE.editors[0].getContent()
    设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
*/
function setcontent() {
    tinyMCE.activeEditor.setContent("<h1>设置内容1</h1>");
}

3.2 读取数据

  function getcontent() {
    alert(tinyMCE.activeEditor.getContent());
}

3.3 获取纯文本

 /*3、获取不带HTML标记的纯文本内容：
     var activeEditor = tinymce.activeEditor;
     var editBody = activeEditor.getBody();
     activeEditor.selection.select(editBody);
     var text = activeEditor.selection.getContent( {'format' : 'text' } );*/
function getbody() {
    var activeEditor = tinymce.activeEditor;
    var editBody = activeEditor.getBody();
    activeEditor.selection.select(editBody);
    var text = activeEditor.selection.getContent({'format': 'text'});
    alert(text);
}