Vue项目中使用富文本编辑器
最近项目中有一个需求,客户要求在上传图片的同时做文字描述,做到图文并茂的效果,考虑了一下,决定使用富文本编辑器来实现此功能。
说明:这边文章讲述了富文本编辑器在vue项目的使用场景和用法。
文章目录
- Vue项目中使用富文本编辑器
- 前言
- 一、wangEditor
- 二、使用步骤
- 1.下载及引入库
- 2.具体使用
- 总结
前言
插件官网地址:https://www.wangeditor.com/v5/for-frame.html#%E8%B0%83%E7%94%A8-api
官网说明: 官网内容对当前富文本编辑器和其他编辑器作对比,阐述了其他富文本编辑器的不足之处,
支持vue2,vue3,react等技术的配套使用,官网简单易懂,有兴趣可以去查阅。
提示:以下是本篇文章正文内容,下面案例可供参考
一、wangEditor
说明:wangEditor是富文本编辑器之一, 首选之一,优点如下:
1丶简单易用:WangEditor 的界面简洁,易于使用,即使是没有编程经验的用户也可以很快。
2丶功能全面:WangEditor 提供了丰富的编辑功能,如字体、颜色、大小、加粗、斜体等,同时还支持插入图片、链接、表格、代码等多种元素。
3丶兼容性强:WangEditor 能够在各种浏览器和操作系统上稳定运行,兼容性非常好。
4丶扩展性强:WangEditor 提供了丰富的 API 和插件机制,用户可以根据自己的需求进行扩展和定制。
5丶开源免费:WangEditor 是一款开源免费的编辑器,用户可以自由使用和修改。
二、使用步骤
1.下载及引入库
代码如下(示例):
npm install wangeditor
项目引入:
import wangEditor from 'wangeditor'
2.具体使用
代码如下(示例):
<div ref="editorElem" style="height: 500px;"></div>
// 特别说明 :
我这里是上传本地图片 所以需要用到input
<input type="file" ref="fileInput" style="display: none;" @change="uploadImage">
初始化代码如下:
mounted() {
// 初始化编辑器
this.editor = new wangEditor(this.$refs.editorElem);
// 配置编辑器
this.editor.config.uploadImgShowBase64 = true; // 显示Base64编码的图片
this.editor.config.uploadImgMaxLength = 5 * 1024 * 1024; // 限制上传图片的大小为5MB
// 创建编辑器
this.editor.create();
},
这里一定要销毁编辑器 防止内存泄漏
destroyed() {
// 销毁编辑器
this.editor.destroy();
},
以下是一个图片上传的实现代码 :
uploadImage() {
const file = this.$refs.fileInput.files[0];
if (!file) {
return;
}
// 限制上传图片的类型为图片格式
if (!/^image\/(png|jpg|jpeg|gif|bmp)$/i.test(file.type)) {
alert('上传的文件不是图片');
return;
}
// 限制上传图片的大小为5MB
if (file.size > 5 * 1024 * 1024) {
alert('上传的图片不能超过5MB');
return;
}
// 读取图片文件,将其转换成Base64编码的格式
const reader = new FileReader();
reader.onload = (event) => {
const base64 = event.target.result;
this.editor.cmd.do('insertHtml', `<img src="${base64}" />`);
};
reader.readAsDataURL(file);
// 清空文件选择框
this.$refs.fileInput.value = '';
}
总结
WangEditor 是一款基于 JavaScript 和 jQuery 开发的富文本编辑器,它具有轻量、简洁、易于使用等特点