vue-como-editor

• 基于wangeditor封装的专用编辑器，丰富了wangeditor的功能

安装

npm install vue-como-wangeditor

使用

一、全局引入

• 在main.js中引入

import vueComoEditor from 'vue-como-editor';
Vue.use(vueComoEditor)
 

编译

npm run vue-como-editor

events

事件名	说明	参数
edit-change	编辑器内容改变事件	function(html)
upload-image	编辑器文件上传事件	包括单复制图片在编辑里面和手动触发图片上传事件 function(files,insertHnadel)
edit-blur	编辑器失去焦点事件	function(html)
edit-focus	编辑器获取焦点事件	function(html)

methods

方法名	说明	备注信息
getEditor	获取当前编辑器实例	this.$refs.name.getEditor()

props

方法名	说明	备注信息
config	编辑器配置	示例{height:500} 具体可以查看 wangeditor 的配置项
parseTextHandle	编辑器粘贴内容处理	function(html) 注意需返回处理后的html 也可以不处理,可不传
value	增加value值的处理	string 可以使用v-model绑定值的设置值,非常灵活，跟普通的input框一样使用

示例

<template>
    <div class="content">
        <div class="buttons">
            <button @click="handleGetEditorInstance" style="background-color: #c00;border:none;padding: 5px 10px;line-height: 30px;color: #fff;margin-bottom: 10px;"> 获取编辑器实例 </button>
        </div>
        <vue-como-editor :config="{height:600}" @edit-change="handleEditChange" @upload-image="handleUploadImage" ref="comoEditor" :vlaue="content"></vue-como-editor>
    </div>
</template>
<script>
import imageHandle  from 'vue-como-image';
export default {
    name:'home',
    data() {
        let that = this;
        return {
            content:''
        }
    },
    components:{},
    methods:{
        /**
         * [handleEditChange 内容改变事件,可以不再处理此事件]
         * @author    szjcomo
         * @date           2020-10-17
         * @return {[type]}     [description]
         */
        handleEditChange:function(html) {
            let that = this;
            console.log(that.content)
        },
        /**
         * [handleUploadImage 文件上传处理]
         * @author    szjcomo
         * @date           2020-10-17
         * @param  {[type]}     files     [所有上传的文件]
         * @param  {[type]}     addHandle [插入函数]
         * @return {[type]}               [description]
         */
        handleUploadImage:function(files,addHandle) {
            let that = this;
            files.forEach(async (file)=>{
                let result = await imageHandle.compress(file);
                addHandle(result.content);
            })
        },
        /**
         * [handleGetEditorInstance 获取编辑器实例]
         * @author    szjcomo
         * @date           2020-10-17
         * @return {[type]}     [description]
         */
        handleGetEditorInstance:function() {
            let that = this;
            let instance = that.$refs.comoEditor.getEditor();
            console.log(instance)
        }
    }
}
</script> 

更新日志

2020年10月15日

• 完成编辑器封装，完善编辑器使用文档

2020年10月21日

• 增加v-model绑定数据和设置数据