一、下载UEditor
我下载的是1.4.3.3 utf-8 jsp 版本 下载链接：https://ueditor.baidu.com/web...
将下载好的文件解压到 /static/urditor 目录，如图：
二、创建组件 UEditor
组件内容如下
<template> <div class="ueditor" ref="ueditor"> <script :id="id" type="text/plain"></script> </div></template><script>import '../../../static/ueditor/ueditor.config.js'import '../../../static/ueditor/ueditor.all.min.js'import '../../../static/ueditor/lang/zh-cn/zh-cn.js'import '../../../static/ueditor/ueditor.parse.min.js'import { baseURL } from '@/config/const'import { getToken } from '@/config/auth'export default { name: 'UEditor', data () { return { editor: null, flag: true, baseURL: baseURL } }, props: { value: {//文本内容 type: String }, config: {//单独设置 type: Object, default: ()=> { return { initialFrameWidth: null, initialFrameHeight: 350, UEDITOR_HOME_URL: 'static/ueditor/' } } }, id: { type: String, default: ()=> { return 'editor' + new Date().getTime(); } } }, computed: { DefaultConfig() { //默认设置 let obj = this.config; let serverUrl = this.baseURL + '/file-service/v1/ueditorUpload?' + 'token=' + getToken(); //服务器地址 return { serverUrl, ...obj } } }, created() { }, mounted() { this.initUEditor() }, watch: { 'value': function (val) { if(this.flag) { this.editor.setContent(val) } this.flag = true } }, methods: { initUEditor() { this.$nextTick(() => { this.editor = UE.getEditor(this.id, this.DefaultConfig); // 初始化UE this.editor.addListener("ready", () => { if (this.value == null) { this.editor.setContent(''); } else { this.editor.setContent(this.value); } }); this.editor.addListener("contentChange", () => { //监听内容变化 this.getUEContent(); }) }) }, getUEContent() { // 获取内容方法 this.flag = false; let content = this.editor.getContent(); // content = content.replace(/<p([\s\S]*?)<\/p>/g, "<div$1</div>"); // 将默认p标签设置为div标签 this.$emit("getUEContent", content) } }, destroyed() {//退出后销毁 this.editor.destroy(); }}</script><style scoped lang="scss"> .ueditor { // 防止外部样式影响变形 line-height:normal; }</style>三、组件的使用
......<el-form-item label="通知内容" prop="content"> <div> <UEditor :value="form.content" @getUEContent="getUEContent"></UEditor> </div></el-form-item>......getUEContent(value) { // 勉强实现v-model效果 this.form.content = value;},......使用方法如上，想实现v-model的效果，没有实现，欢迎补充一下
四、上线问题
最后还有个需要注意的是，上线到生产环境后，如果遇到富文本加载不出来，路径报错的问题，那需要更改一下配置：
- ueditor.config.js文件中首先配置一下
window.UEDITOR_HOME_URL = '';
window.UEDITOR_HOME_URL = '';var URL = window.UEDITOR_HOME_URL || getUEBasePath();- 组件中的路径需要配置成
UEDITOR_HOME_URL: 'static/ueditor/'
props: { ...... config: {//单独设置 type: Object, default: ()=> { return { initialFrameWidth: null, initialFrameHeight: 350, UEDITOR_HOME_URL: 'static/ueditor/' } } }, ......}https://juejin.im/post/5c6e78...