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

这里写图片描述

关注我的技术公众号《漫谈人工智能》,每天推送优质文章

两只橙 CSDN认证博客专家 TensorFlow NLP 神经网络
全球AI挑战赛百强选手,曾任职于腾讯微信事业部,魅族flyme事业部,现任中国平安AI研发工程师。《深度学习500问》作译者,CSDN博客专家及签约讲师,指弹吉他爱好者,简书专栏作家。
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 59.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值