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

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

2、组件

(1)组件页面

ueditor.vue

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();

},

}

(2)测试页面

test_ue.vue

UE编辑器示例
需要使用编辑器时,调用UE公共组件即可。可设置填充内容content,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。

获取内容

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)

}

}

};

d312590c5e133b74b640e06bcbaeade3.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值