wangeditor富文本编辑器在vue2中的使用

官方使用方法

https://www.wangeditor.com/v5/for-frame.html

1、安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

1. 使用

模板

<template>
  <div style="border: 1px solid #ccc;">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
      />
  </div>
</template>

js

<script>
// import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: { Editor, Toolbar },
  data () {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  },
  mounted () {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

引入样式

<style src="@wangeditor/editor/dist/css/style.css"></style>

项目运用包括图片上传功能

注意事项：

1. 后台提供上传图片接口

import { editorUpImg } from '@/api/cms/content.js'

2. 配置

editorConfig: { 
            placeholder: '请输入内容...',
            // 所有的菜单配置，都要在 MENU_CONF 属性下
            MENU_CONF: {
            //配置上传图片
              uploadImage: {
                customUpload: this.uploadImg
              }
            }
          },

完整代码及运用

1. 新建一个myEditor.vue文件

<template>
  <div>
      <div style="border: 1px solid #ccc;">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 400px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
  </div>
  </template>
   
  <script>
  // npm 安装
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { editorUpImg } from '@/api/cms/content.js'
  export default {
      components: { Editor, Toolbar },
      props: {
        myHtml: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          editor: null,
          html: '',
          toolbarConfig: {
            excludeKeys: [
              // 排除菜单组，写菜单组 key 的值即可
              "group-video" //去掉视频
            ]
          },
          editorConfig: { 
            placeholder: '请输入内容...',
            // 所有的菜单配置，都要在 MENU_CONF 属性下
            MENU_CONF: {
            //配置上传图片
              uploadImage: {
                customUpload: this.uploadImg
              }
            }
          },
        mode:"default"
          };
      },
      watch: {
        myHtml: {
          deep: true,
          handler(val) {
            this.html = val
          }
        }

      },
      created() {
        if(this.myHtml!==''){
          this.html = this.myHtml
        }
      },
      methods: {
        getVal () {//父组件获取子组件的值
          return this.html
        },
          //上传图片
        uploadImg(file, insertFn){
          let imgData = new FormData();
          imgData.append('file', file);
                //调接口，上传图片
          editorUpImg(imgData).then(res => {
            if(res.code == 0){
                insertFn(res.data);
            }else{
          }
          })
        },
   
          onCreated(editor) {
              this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
          },
      },
      mounted() {
          
      },
      beforeDestroy() {
          const editor = this.editor
          if (editor == null) return
          editor.destroy() // 组件销毁时，及时销毁编辑器
      },
      
      
  };
  </script>
  <style src="@wangeditor/editor/dist/css/style.css"></style>

2. 引用组件

import MyEditor from './myEditor.vue'

3. 在模板中使用组件

<MyEditor :myHtml="form.contentDetails" ref="myEditor"></MyEditor>

4. 根据ref获取编辑器中的值(this.$refs[ref].getVal())

this.$refs['myEditor'].getVal()