vue項目使用百度富文本UEdtior

1、下載UEditor

我下載的是1.4.3.3 utf-8 jsp 版本 下載連接：https://ueditor.baidu.com/web...

將下載好的文件解壓到 /static/urditor 目錄，如圖：

2、建立組件 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>

3、組件的使用

......
<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的效果，沒有實現，歡迎補充一下

4、上線問題

最後還有個須要注意的是，上線到生產環境後，若是遇到富文本加載不出來，路徑報錯的問題，那須要更改一下配置：

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...