vue引入ueditor

1. 下载 UEditor

下载地址：http://ueditor.baidu.com/website/download.html

2. 在 Vue 项目中创建 UEditor 组件

在 src/components 目录下创建 UEditor.vue 文件，然后在里面写入以下代码：

<template>
<div :id="editorId"></div>
</template>

<script>
export default {
props: {
value: {
type: String,
default: '',
},
config: {
type: Object,
default: () => ({}),
},
},
data() {
return {
editorId: `editor_${Date.now()}_${Math.random().toString().substr(2)}`,
};
},
mounted() {
// 异步加载 UEditor.js
const id = this.editorId;
const config = this.config;
const value = this.value;
const _self = this;
const ueditorScript = document.createElement('script');
ueditorScript.setAttribute('src', 'http://cdn.staticfile.org/ueditor/1.4.3.3/ueditor.all.js');
document.body.appendChild(ueditorScript);
ueditorScript.onload = function () {
const editor = window.UE.getEditor(id, config);
editor.ready(function () {
editor.setContent(value);
});
editor.addListener('contentChange', function () {
_self.$emit('input', editor.getContent());
});
};
},
beforeDestroy() {
// 销毁 UEditor 实例
window.UE.getEditor(this.editorId).destroy();
},
};
</script>

3. 在 Vue 项目中使用 UEditor 组件

在需要使用 UEditor 的页面中引入 UEditor 组件，然后在 template 中使用即可。

<template>
<div class="ueditor-container">
<ueditor v-model="content" :config="config" />
</div>
</template>

<script>
import UEditor from '@/components/UEditor.vue';
export default {
components: {
UEditor,
},
data() {
return {
content: '',
config: {
initialFrameHeight: 500,
autoHeightEnabled: false,
autoFloatEnabled: false,
toolbars: [
['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough', 'fontfamily', 'fontsize', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'link', 'unlink', 'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells', 'removeformat', 'cleardoc', 'preview'],
],
},
};
},
};
</script>