wangEditor+SringBoot富文本编辑器使用（图片上传）

最新推荐文章于 2024-07-22 17:43:00 发布

二萌偏

最新推荐文章于 2024-07-22 17:43:00 发布

阅读量821

点赞数

分类专栏：前端文章标签： wangEditor

本文链接：https://blog.csdn.net/weixin_39735923/article/details/83142971

版权

本文档介绍了如何在项目中集成wangEditor富文本编辑器，并详细阐述了图片上传至服务器的流程。首先从wangEditor官网下载编辑器，然后在HTML中引入编辑器所需的js文件，创建编辑器容器。当用户上传图片时，图片会被保存在服务器的临时文件夹。最终保存内容时，会将临时文件夹中的图片移动到正式文件夹，并将编辑器内容存储至数据库。

摘要由CSDN通过智能技术生成

最近项目中使用到了wangEditor插件，在此记录使用过程。

官网下载wangEditor：https://github.com/wangfupeng1988/wangEditor/releases

思路：点击插件中上传图片，图片上传至服务器临时图片文件夹下，当最后点击确认保存按钮时，再把临时文件夹下的图片复制到正式的文件夹下面。

在HTML中引入wangEditor.js：

<!--引入wangEditor中的js文件-->
<script src="../plugins/wangEditor-3.1.1/release/wangEditor.js"></script>

HTML中只需要顶一个富文本编辑器容器

<div id="editor1" style="height: 180px;margin-bottom: 20px">
</div>

js初始化wangEditor：

<!--初始化富文本编辑器-->
<script type="text/javascript">
    var editor1 = new wangEditor('#editor1');    //单选信息富文本编辑器
    editor1.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'justify',  // 对齐方式
        'image',  // 插入图片
        'undo',  // 撤销
        'redo'  // 重复
    ],
    // 使用 base64 保存图片
    editor1.customConfig.uploadImgShowBase64 = true;
    // 隐藏“网络图片”tab
    editor1.customConfig.showLinkImg = false;
    // 限制一次最多上传 3 张图片
    editor1.customConfig.uploadImgMaxLength = 3;
    //上传图片 将图片以文件的形式传给后台进行操作返回图片 url
    editor1.customConfig.customUploadImg = function (files, insert) {
        var da = new FormData();
        if (files[0].size > maxsize) {
            layer.msg("上传图片大小不能超过2M！")
        } else {
            da.append(&#