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绑定数据和设置数据