vue中使用富文本编辑器

柔情只为你懂 2022-09-12 07:56 300阅读 0赞

> 前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器

先敬上官网：[http://www.wangeditor.com/index.html][http_www.wangeditor.com_index.html]

wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！

第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了

#### node下载： ####

npm i wangeditor -S
    npm install xss // 防止xss攻击

#### 做个vue组件 ####

<template>
      <div class="project-edit-info-detail">
        <div ref="projectDetail" style="text-align:left;"></div>
      </div>
    </template>
    
    <script>
    import E from 'wangeditor'
    import xss from 'xss'
    import {  setUploadPhoto } from '@/api/common'
    
    export default { 
      data() { 
        return { 
          // 富文本
          editor: null,
          editorContent: ''
        }
      }, // 接收父组件的方法
      mounted() { 
        this.editor = new E(this.$refs.projectDetail)
    
        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 设置图片可以上传 2M
        this.editor.config.uploadImgMaxLength = 1 // 限制一次可以上传多少张图片
        // 自定义图片上传
        this.editor.config.customUploadImg = async(files, insert) => { 
          const formData = new FormData() /* files 是 input 中选中的文件列表 */
          formData.append('image', files[0])
          const {  data } = await setUploadPhoto(formData)
          insert(data) /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
        }
    
        this.editor.config.onchange = html => {  // 编辑器的事件，每次改变会获取其html内容
          this.editorContent = xss(html)
          // 防止xss攻击
          this.$emit('contentChange', this.editorContent)
        }
    
        this.editor.config.menus = [
          // 菜单配置
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'code', // 插入代码
          'undo', // 撤销
          'redo' // 重复
        ]
        this.editor.create() // 创建富文本实例
      },
      methods: { 
      }
    }
    </script>

#### 效果 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZGA5ZOIQA_size_20_color_FFFFFF_t_70_g_se_x_16]

[http_www.wangeditor.com_index.html]: http://www.wangeditor.com/index.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZGA5ZOIQA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bbc543905a3640b294b8d50aeaefd54a.png