vue js 简单使用富文本wangEditor

爱吃烤馒头的阿宝

已于 2022-04-11 09:24:09 修改

阅读量1.3k

点赞数

分类专栏：前端技术 java 文章标签： java js

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

本文链接：https://blog.csdn.net/ewu1675/article/details/124090935

版权

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

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

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

//上传成功后返回请求路径，自动预览到内容中，如果上传成