vue中使用wangeditor

项目中用到了富文本框，选来选去选择了wangeditor,先写了demo，用起来还算比较简单

用法

安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

空白编辑器

<template>
  <div id="app">
    <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"
            @onChange="lisChange($event)"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
  </div>
</template>
 
<script>
 
import '@wangeditor/editor/dist/css/style.css'
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: 'simple', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        lisChange(e){
          console.log(e.getHtml())
        }
    },
    mounted() {
        
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
 
 
<style>
 
</style>

其他用到的配置

菜单不显示某个按钮

toolbarConfig: {
        excludeKeys: [
          'fullScreen',//不显示全屏
          'insertVideo',//不显示插入视频
        ]
      },

上传图片

editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploadImageMe // this.uploadImageMe 是 methods 中的一个普通方法
          },
        }
      },

//上传文件配置
    uploadImageMe(file, insertFn){
      // file 即选中的文件
      // 自己实现上传，并得到图片 url alt href
      let name = file.name;
      let suffix = file.type.split("/")[1];
      name = name + '.' + suffix;
 
      let formdata = new FormData()
      formdata.append("file", file)  
        
        //上传方法
      uploadImg(formdata).then(res => {
        // 最后插入图片
        insertFn(res.url , res.name, res.url )
      })
 
    },

其他API

判断是否为空

this.editor.isEmpty() 

有标签就不算空，所以我判断是否为空用的是

this.editor.getText()=='' //this.editor.getText() 获取纯文本

获取toolbar所有key

this.editor.getAllMenuKeys()