在网页中使用富文本编辑器editor+vue

先下载一个富文本编辑器（官网地址）

在vue中新建一个editor.vue

[code]<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>

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

<style>

</style>

 把下载好的uditor压缩文件夹放在static中

改一下config里面的这一行（第一行）。

然后在需要用到的vue中使用它，具体如下：

[code]<template>
<div class="components-container">
<div class="info"></div>
<div class="editor-container">
<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
</div>
</div>
</template>

<script>
import UE from '../../editor.vue';
export default {
components: {UE},
data () {
return: {
defaultMsg: '这里是UE测试',
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
}
}
}
</script>

<style>
.info{
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>

然后效果就出来了。嗯，，如果感觉上面的功能太多了。可以看[文档]

还有图片的路径。反正我的图片出不来，所以正在改。。。