vue项目使用百度富文本UEdtior

一、下载 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 的效果，没有实现，欢迎补充一下

四、上线问题

最后还有个需要注意的是，上线到生产环境后，如果遇到富文本加载不出来，路径报错的问题，那需要更改一下配置：

1. ueditor.config.js 文件中首先配置一下 window.UEDITOR_HOME_URL = '';

window.UEDITOR_HOME_URL = '';
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

1. 组件中的路径需要配置成 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…