富文本编辑器——百度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>