vue 封装ueditor富文本编辑器（百度富文本编辑器）组件，支持双向绑定

开发环境：vue.js 2.0

文件名称：ueditor.vue 

<template>

    <div>

        <div :id="this.id"></div>

    </div>

</template>



<script>

    module.exports ={

        name: 'editor',

        props: ['id','value'],

        model: {

            prop: 'value',

            event: 'input',

        },

        data() {

            return {

                ue: '', //ueditor实例

                content: '', //编辑器内容

            }

        },

        methods: {

            //初始化编辑器

            initEditor() {

                this.ue = UE.getEditor(this.id, {

                    initialFrameWidth: '100%',

                    initialFrameHeight: '250',

                    scaleEnabled: false

                })

               

                //编辑器准备就绪后会触发该事件

                this.ue.addListener('ready',()=>{

                    //设置可以编辑

                    this.ue.setEnabled();

                    if(this.value != null)

                        this.ue.setContent(this.value);

                });

                //alert(this.data);

                //编辑器内容修改时

                //this.selectionchange();.  

                this.ue.addListener('blur', () => {

                    this.content = this.ue.getContent();

                    //this.data = this.content;

                    if(this.content == this.value){

                        return;

                    }

                    this.$emit('input',this.content);

                    this.$emit('change');

                })

               

            },

           

            //编辑器内容修改时

            //selectionchange() {

           

            //}

        },

        activated() {

            //初始化编辑器

            this.initEditor();

        },

        mounted() {

            //初始化编辑器

            this.initEditor();

        },

        destroyed() {

            //销毁编辑器实例，使用textarea代替

            this.ue.destroy();

            //重置编辑器，可用来做多个tab使用同一个编辑器实例

            //如果要使用同一个实例,请注释destroy()方法

            //this.ue.reset()

        }

    }

</script>




<style >

   

    .params .el-form-item__content{

        line-height: 0px !important;

        position: relative;

        font-size: 14px;

    }

</style>

使用示例：

1）引入vue.js 与httpVueLoade.js，示例：

<!--vue-->
<script src="/lib/vue/vue-2.6.11.min.js"></script>
<!-- vue组件解析 -->
<script src="/lib/httpVueLoader-1.4.2.js"></script>

文件下载地址：

链接：https://pan.baidu.com/s/1ydW88GgwJOu1jg6ifkZgAA 
提取码：zxew

2）new Vue（）components 引入组件

new Vue({

        el:"#app",

        data:{

        },

        methods:{

        },    

        components: {

            // 引入富文本编辑器组件
            'ueditor':"url:/component/ueditor.vue"

    }

})

3） 在页面上调用组件

<ueditor id="'content" v-model="content"  @change="contentChange(index)">
</ueditor>