Nodding Previously Managed

    vue-como-editor

    1.0.1 • Public • Published

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

    Install

    npm i vue-como-editor

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    734 kB

    Total Files

    6

    Last publish

    Collaborators

    • como20170606