富文本编辑器——百度UEditor插件Vue组件化

1、百度UEditor插件的安装过程请查看我的另篇博文：http://blog.csdn.net/lzc4869/article/details/78438121

2、组件

（1）组件页面

ueditor.vue

<template>        <script :id=id type="text/plain"></script></template><script>    export default {        name: 'UE',        data() {            return {                editor: null            }        },        props: {            content: {                type: String,                default:''            },            config: {                type: Object,            },            id: {                type: String            }        },        ready() {            const _this = this;            _this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE            _this.editor.addListener("ready", function () {                _this.editor.setContent(_this.content); // 确保UE加载完成后，放入内容。            });        },        methods: {            getContent() { // 获取内容方法                return this.editor.getContent();            }        },        destroyed() {            this.editor.destroy();        },    }</script>

（2）测试页面

test_ue.vue

<template>    <div class="content-wrapper">        <div class="content">            <div class="info">UE编辑器示例<br>需要使用编辑器时，调用UE公共组件即可。可设置填充内容content，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。支持页面内多次调用。            </div>            <button @click="getUEContent()">获取内容</button>            <ueditor :content=content1 :config=config1 :id="ue1"></ueditor>            <ueditor :content=content2 :config=config2 :id="ue2"></ueditor>        </div>    </div></template><script>    import ueditor from '../common/component/ueditor.vue';    export default {        components: {            ueditor        },        data() {            return {                content1: '这里是UE测试1',                content2: '这里是UE测试2',                config1: {                    initialFrameWidth: 1600,                    initialFrameHeight: 350,                    wordCount: false,                },                config2: {                    autoHeight: false,                    wordCount: false,                },                ue1: "ue1", // 不同编辑器必须不同的id                ue2: "ue2"            }        },        methods: {            getUEContent() {                // 获取ueditor值                let content1 = UE.getEditor(this.ue1).getContent();                let content2 = UE.getEditor(this.ue2).getContent();                console.log(content1)                console.log(content2)            }        }    };</script>