vue js 简单使用富文本wangEditor

原创已于 2022-04-11 09:24:09 修改 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #js

于 2022-04-11 09:21:58 首次发布

java 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端技术

2 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中集成wangEditor富文本编辑器，包括编辑器的引入、容器声明、变量声明、初始化组件以及图片上传功能的实现，同时讲解了与后端接口配合进行图片上传的步骤。

引入js，这里使用的是wangEditor，下载地址wangEditor - 轻量级 web 富文本编辑器

<head>
    <script src="../../../statics/libs/wangEditor.min.js"></script>
</head>

声明容器

<div id="div1" ></div>

声明变量（写在js最外层）

var editor;

初始化组件

const E = window.wangEditor;
editor = new E('#div1');

上传图片

//限制图片格式
editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif']
//限制一次上传图片数量
editor.config.uploadImgMaxLength = 1;
//限制图片大小
editor.config.uploadImgMaxSize = 2 * 1024 * 1024

//上传成功后返回请求路径，自动预览到内容中，如果上传成功却加载不出图片，会抛出上传失败
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    var formData = new FormData();
    formData.append('file', resultFiles[0]);
    $.ajax({
        type: "POST",
        url: baseURL + "business/cmsmessage/upLoad",
        contentType: false,
        processData: false,
        data: formData,
        success: function (r) {
            //组件函数，声明就好
            insertImgFn(r.name)
        }
    });
}

//创建
editor.create()

后端上传图片接口（maping固定路径）

@RequestMapping("/upLoad")
public R upLoad(MultipartFile file) {
    try {
        //这里使用uuid作为新文件名
        String format = UUID.randomUUID().toString().replace("-", "").toUpperCase() + Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));

        //服务器图片存储路径
        String filePath = "/home/images/";

        //上传方法，这里用的是字节流
        FilesUtils.uploadFile(file.getBytes(), filePath, format);

        //返回文件路径，windows本地调试使用c盘d盘图片上传后预览不了，属于正常情况，可以再磁盘中找到上传的文件，服务器上可以正常使用
        //返回name属性，值为图片路径
        return R.ok().put("name", "http://127.0.0.1/images"+ format);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return R.error("错误");
}

富文本编辑框内的取值、赋值

editor.txt.html()

editor.txt.html(r.cmsMessage.content);