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 开发的富文本编辑器，它具有轻量、简洁、易于使用等特点，目前已经广泛应用于各类 Web 项目中欢迎大家使用。