Use rich text editor in vue project

Use rich text editor in Vue project

最近项目中有一个需求，客户要求在上传图片的同时做文字描述,做到图文并茂的效果,考虑了一下,决定使用富文本编辑器来实现此功能。
Explanation: This article describes the usage scenarios and usage of the rich text editor in the Vue project.

---

---

foreword

插件官网地址：https://www.wangeditor.com/v5/for-frame.html#%E8%B0%83%E7%94%A8-api

Official website description: The content of the official website compares the current rich text editor with other editors, and explains the shortcomings of other rich text editors. It supports the supporting use of vue2, vue3, react and other technologies. The official website is simple and easy to understand. If you are interested, you
can to check.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. wangEditor

Description: wangEditor is one of the rich text editors, one of the first choices, and its advantages are as follows:
1. Easy to use: WangEditor has a simple interface and is easy to use, even users with no programming experience can use it quickly.
2. Comprehensive functions: WangEditor provides rich editing functions, such as font, color, size, bold, italic, etc., and also supports inserting pictures, links, tables, codes and other elements.
3. Strong compatibility: WangEditor can run stably on various browsers and operating systems, and the compatibility is very good.
4. Strong scalability: WangEditor provides rich API and plug-in mechanism, users can expand and customize according to their own needs.
5. Open source and free: WangEditor is an open source and free editor that users can use and modify freely.

2. Use steps

1. Download and import library

The code is as follows (example):

npm install wangeditor   

项目引入：
import wangEditor from 'wangeditor'

2. Specific use

The code is as follows (example):

  <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 = '';
   }

---

Summarize

WangEditor 是一款基于 JavaScript 和 jQuery 开发的富文本编辑器，它具有轻量、简洁、易于使用等特点，目前已经广泛应用于各类 Web 项目中 欢迎大家使用。