在vue中使用百度富文本编辑器

1.官网中,下载源码

2.解压文件到static中,放在ue文件夹中。

3.将ueditor.config.js中的备注部分的* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";去掉备注改成自己window.UEDITOR_HOME_URL = ‘/static/ue/’   ue存放解压后文件的文件夹。

4.封装ueditor.vue文件

        <script id="editor" type="text/plain">

    export default {

name:'ue',

        data () {

return {

editor:null

            }

},

        props: {

value:'',

            config: {}

},

        mounted () {

const _this =this

            this.editor = window.UE.getEditor('editor', this.config)

this.editor.addListener('ready', function () {

_this.editor.setContent(_this.value)

})

},

        methods: {

getUEContent () {

return this.editor.getContent()

}

},

        destroyed () {

this.editor.destroy()

}

}

5.在要用到的组件引入,刚才的组件

    <div class="con">

        <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue">

        <input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">

    import Uediterfrom './ue.vue'

    export default {

components: {Uediter},

        data () {

return {

dat: {

content:''

                },

                ueditor: {

value:'编辑器默认文字',

                    config: {}

}

}

},

        methods: {

returnContent () {

this.dat.content =this.$refs.ue.getUEContent()

console.log(this.dat.content)

}

}

}

    .con{

margin-top:60px;

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容