html组件化编辑器,vue.js组件化使用百度富文本编辑器（一）

注意&＃xff1a;

本文采用的编辑器为&＃xff1a;idea

1.下载百度富文本编辑器&＃xff0c;地址&＃xff1a;https://ueditor.baidu.com/website/download.html#ueditor

2.加入到static文件夹下&＃xff0c;如图&＃xff1a;

3.在main.js中引入js。

注意&＃xff1a;一定要修改ueditor.config.js中的路径

window.UEDITOR_HOME_URL &＃61; "./static/ueditor/"

4.编写vue组件&＃xff1a;

export default {

name: &＃39;UE&＃39;,

data () {

return {

editor: null

}

},

props: {

defaultMsg: {

type: String

},

config: {

type: Object

}

},

mounted() {

const _this &＃61; this;

this.editor &＃61; UE.getEditor(&＃39;editor&＃39;, this.config); // 初始化UE

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

_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后&＃xff0c;放入内容。

});

},

methods: {

getUEContent() { // 获取内容方法

return this.editor.getContent()

}

},

destroyed() {

this.editor.destroy();

}

}

5.编写测试使用的Vue界面&＃xff1a;

//采用局部引用的方式注册组件

import ueditor from &＃39;&＃64;/components/Ueditor&＃39;;

export default {

name: "PublishPage",

data() {

return {

defaultMsg: &＃39;说点什么吧&＃39;,

config: {

initialFrameWidth: null,

initialFrameHeight: 350

}

}

},

components: {

ueditor

},

methods: {

getUEContent() {

let content &＃61; this.$refs.ue.getUEContent();

this.$notify({

title: &＃39;获取成功&＃xff0c;可在控制台查看&＃xff01;&＃39;,

message: content,

type: &＃39;success&＃39;

});

console.log(content)

}

}

}

6.编写路由

7.运行项目

npm run dev

8.效果展示

注&＃xff1a;

1.编写的文本和媒体文件发送到服务端请看下一篇介绍。

2.这是笔者学习记录的过程&＃xff0c;如果有错误&＃xff0c;敬请指正&＃xff0c;不喜勿喷&＃xff0c;谢谢。