springboot java实现富文本编辑器，内容为文本（带段落格式换行缩进等）

深藏阁楼爱情的钟 2023-06-11 05:26 21阅读 0赞

# 1、找个简单的富文本框架-wangEditor #

> 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

**下载地址**

[http://www.wangeditor.com/][http_www.wangeditor.com]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 1][]

> **下载解压后，放在自己的项目下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 2][]

> **引入这个js到自己的页面**

直接上页面：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>富文本编辑页面</title>
        <#include "/common/resources.html" >
    </head>
    <body>
    
    <div style="margin:10%;width: 80%">
    
        
        <div>编辑内容</div>
        <div class="layui-input-block" id="wangEditer" ></div>
    
        <button onclick="save()">提交文本内容</button>
    
        <br><br>
        <div>显示编辑内容</div>
        <div class="layui-input-block" id="showContent"></div>
    
        <div>显示编辑内容</div>
    
        
        <div id="myContent">
    
        </div>
    
    
    </div>
    
    
    
    
    </body>
    <script src="/wangEditor/release/wangEditor.js"></script>
    <script>
        //加载富文本编辑器
        var E = window.wangEditor;
    
        //富文本1 用于编辑
        var editor = new E('#wangEditer');
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create();
    
        //富文本2 用于显示 编辑的内容
        var showContent = new E('#showContent');
        // 或者 var editor = new E( document.getElementById('editor') )
        showContent.create();
    
    
        //点击提交
        function save() {
    
            //富文本内容
            var content = editor.txt.html();
    
            //可以保存数据库
            if(checkIsNull(content)){
                alert("请先编辑内容");
            }
    
            //打印内容到控制台
            console.log(content);
    
    
            /* 这里直接显示富文本内容 */
            //先初始化显示内容 为空
            showContent.txt.html("");
            //赋值、显示编辑内容
            showContent.txt.html(content);
            //在任意位置 显示内容
            document.getElementById("myContent").innerHTML = content;
        }
    
    
        function checkIsNull(val) {
            return val === undefined  || val === null || val.trim() === "";
        }
    
    </script>
    </html>

富文本内容 可以保存在数据库中 再次查询，回显。这里省略数据库查询 直接 再次回显编辑 、显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 3][]

更多用法，请看相关开发文档

[https://www.kancloud.cn/wangfupeng/wangeditor3/332599][https_www.kancloud.cn_wangfupeng_wangeditor3_332599]

[http_www.wangeditor.com]: http://www.wangeditor.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70]: /images/20230531/5355f4ba296b4c6392cdc3b49d29c937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 1]: /images/20230531/1d183688625e4fa0896523dcf4fae836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 2]: /images/20230531/5b14e79f81b648dfbbf34a87cdb60b31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 3]: /images/20230531/0a5f7f5c27a849d4a09319baea92ad9b.png
[https_www.kancloud.cn_wangfupeng_wangeditor3_332599]: https://www.kancloud.cn/wangfupeng/wangeditor3/332599