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

最新推荐文章于 2022-09-16 10:44:43 发布

LemonSnm

最新推荐文章于 2022-09-16 10:44:43 发布

阅读量3.1k

点赞数 2

本文链接：https://blog.csdn.net/LemonSnm/article/details/102798053

版权

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

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

下载地址

http://www.wangeditor.com/

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

引入这个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>

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