springboot使用wangEditor轻量级文本编辑器，实现带图片编辑

最新推荐文章于 2024-07-30 18:31:08 发布

还需努力的大菜J

最新推荐文章于 2024-07-30 18:31:08 发布

阅读量2.6k

点赞数 1

分类专栏： Java后端小东西文章标签： springboot wangEditor

本文链接：https://blog.csdn.net/tadacheng9803/article/details/90266978

版权

Java后端小东西专栏收录该内容

8 篇文章 1 订阅

订阅专栏

最近在项目的开发中，需要用到一个前端的文本编辑器，需要用到带图片上传，在网上查询了很多教程之后，尝试了很多的前端编辑器，百度富文本；wysiwyg|微型富文本编辑器，在使用后，发现wangEditor编辑器比较简单，容易上手，适合轻量级开发。

wangEditor2的在线中文文档：https://www.kancloud.cn/wangfupeng/wangeditor2/113961

wangEditor1的在线中文文档以及demo

http://www.wangeditor.com/

我们从官网将demo下载下来之后，可以解压打开文件夹

在这里插入图片描述

在此路径下新建一个index.html文件，用于测试使用，并写入下列代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

打开index.html文件，即可看到一个简单的富文本编辑器出现在我们的面前

在这里插入图片描述

该文本编辑器还可支持带图片上传，具体内容可以查阅官方文档，本教程只写一些简单的使用

在创建编辑器前添加一个清空按钮

在这里插入图片描述
设置按钮参数，使其实现点击清空功能

document.getElementById('btn2').addEventListener('click',function () {
        editor.txt.clear();
    })

设置图片参数

 //设置图片参数
    editor.customConfig.uploadImgShowBase64 = true
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
    editor.customConfig.uploadImgMaxLength = 5

点击提交时获取html格式数据

    document.getElementById('btn1').addEventListener('click', function () {
        // var json = editor.txt.getJSON()  // 获取 JSON 格式的内容
        // var jsonStr = JSON.stringify(json)
        // console.log(jsonStr)
        var content = editor.txt.html();
        console.log(content)
    })