vue2中wangeditor的使用

1.安装

npm install @wangeditor/editor --save

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

2.使用

模板

<template>
    <div>
        <Toolbar
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
        />
    </div>
</template>

 script

1.自定义菜单

2.生成目录

3.统计字数

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import registerMenu from './menuSelf' // 自定义菜单文件
export default {
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {
                // excludeKeys: 'fullScreen' // 排除全屏 
            },
            editorConfig: { 
                placeholder: '请输入内容...',
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            // 复制
            // editor.on('polishClick', () => {
               // this.$emit('polishClick', editor.getSelectionText())
            // })
      
            // 粘贴
            // editor.on('locationClick', () => {
              // this.$emit('locationClick', editor.getSelectionText())
            // })
            // registerMenu(editor) // 自定义菜单
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange(editor) {   
            // 生成目录数据
            // this.navGenerate(editor)
            // 获取字数
            // this.textLength = editor.getText().replace(/\n|\r/gm, '').length
        },
        // header数据
        navGenerate(editor) {
            this.navList = []
            const headers = editor.getElemsByTypePrefix('header')
            headers.map((header) => {
              this.navList.push({
                 id: header.id,
                 type: header.type,
                 value: header.children.map((v) => v.text).join('')
              })
            })
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

TIP

• 赋值 this.editor 时要用 Object.seal()
• 组件销毁时，要及时销毁编辑器

 记得引入 style

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

自定义菜单文件 menuSelf.js 

// 自定义菜单
import { Boot } from "@wangeditor/editor";


 // 复制
 class CopyMenu {
    constructor() {
        this.title = '复制'
        this.iconSvg =
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px"><image  x="0px" y="0px" width="30px" height="30px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfnCB4QLTUtnNdLAAAAr0lEQVQ4y+2UMQ7CMAxFXxro4coCnKcssLQIrsAp2LgMXQKCG7CYgaZNhFRiJoTqvySRnx3bksGbpaRBEnVmhe1YNsmg17qHHcICQ5otEa69s0Ay2vpn5FQ4pH0Y0oUt0zhCpaqzDjLLq9Yi6aMzhFsIG1Wtoa9ApmjRm40wwCma61EHP6JbPgT/zZzHhv0oPPmKMswBp4elOx20C9CrocRqV+8+jueX/mfd2cU9egKqdLm9V4zp8QAAAABJRU5ErkJggg==" /></svg>'
        this.tag = 'button'
    }
    getValue() {
        return ''
    }
    isActive() {
        return false // or true
    }
    isDisabled() {
        return false // or true
    }
    exec(editor) {
        if (this.isDisabled(editor)) {
            return;
        }
        editor.emit('copyClick')
    }
 }
 
// 粘贴
class PasteMenu {
    constructor() {
        this.title = '粘贴'
        this.iconSvg =
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="28px"><image  x="0px" y="0px" width="30px" height="28px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAQAAADc8cciAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfnCB4QLwhHwvnYAAAAsklEQVQ4y+2VTQ7CIBBGX43lZHajFwP0OLrR+9CkXqD+JOPKxbTQTl2Z6DcryLzAMB8ANYEOMURLpEYpmsB3BA23CBssahA6PSWICc3krsxgRn8Y4KL6elwG39XITa+9pM9PHsthhyepchIeZ4N91ud+DOcOLCFsVdYOIY3hk4LPxdIEqRCgmtl2Lke+y2G/AF+B5lM8zD63fckkUBNpJ+EbfcmeFu1LF8OiNYfBl5TwuBeEgrYVYRNw4wAAAABJRU5ErkJggg==" /></svg>'
        this.tag = 'button'
    }
    getValue() {
        return ''
    }
    isActive() {
        return false // or true
    }
    isDisabled() {
        return false // or true
    }
    exec(editor) {
        if (this.isDisabled(editor)) {
            return;
        }
        editor.emit('pasteClick')
    }
 }

 const MenusList = [
    
    {
        key: 'copyMenu',
        class: CopyMenu,
        index: 1
    },
   
    {
        key: 'pasteMenu',
        class: PasteMenu,
        index: 2
    }
]

const registerMenu = (editor, toolbarConfig) => {
    const allRegisterMenu = editor.getAllMenuKeys() // 获取所有已注册的菜单
    let keys = []
    for(let item of MenusList){
        if(allRegisterMenu.indexOf(item.key) < 0){ // 如果未注册，则注册
            const menuObj = {
                key: item.key,
                factory() {
                    return new item.class()
                }
            }
            Boot.registerMenu(menuObj);
        }
        keys.push(item.key)
    }
    // toolbarConfig.insertKeys = {
    //     index: MenusList[0].index,
    //     keys: keys
    // }
}
export default registerMenu