在vue中完美使用ueditor組件(cdn)解讀

更新時(shí)間：2023年01月22日 10:58:47 作者：大唐錦繡

這篇文章主要介紹了在vue中完美使用ueditor組件(cdn)解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用ueditor組件(cdn)

前言：無需main.js或頁面全局或局部引入，直接使用cdn將ueditor作為vue組件

請直接創(chuàng)建vue文件，作為組件使用。復(fù)制粘貼，即可直接使用(此篇只展示前端代碼,后端大家自由選擇,圖片資源存放建議使用阿里云oss或者七牛云對象存儲)

component組件代碼：

<template>
    <script :id="randomId" name="content" type="text/plain" :style="ueditorStyle"></script>
</template>
<script>
export default {
    name: 'Editor',
    props: {
        ueditorPath: {
            // UEditor 代碼的路徑
            type: String,
            default: '............',//cdn地址
        },
        ueditorConfig: {
            // UEditor 配置項(xiàng)
            type: Object,
            default: function() {
                return {
                    toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']],
                    serverUrl: '............',//后臺保存路由
                };
            }
        },
        ueditorStyle: {
        	type: Object,
        	default: function() {
                return {
                }
            }
        },
    },
    data() {
        return {
            // 為了避免麻煩，每個(gè)編輯器實(shí)例都用不同的 id
            randomId: 'editor_' + (Math.random() * 100000000000000000),
            instance: null,
            // scriptTagStatus -> 0:代碼未加載，1:兩個(gè)代碼依賴加載了一個(gè)，2:兩個(gè)代碼依賴都已經(jīng)加載完成
            scriptTagStatus: 0
        };
    },
    created() {
        if (window.UE !== undefined) {
            // 如果全局對象存在，說明編輯器代碼已經(jīng)初始化完成，直接加載編輯器
            this.scriptTagStatus = 2;
            this.initEditor();
        } else {
            // 如果全局對象不存在，說明編輯器代碼還沒有加載完成，需要加載編輯器代碼
            this.insertScriptTag();
        }
        console.log(this)
    },
    beforeDestroy() {
        // 組件銷毀的時(shí)候，要銷毀 UEditor 實(shí)例
        if (this.instance !== null && this.instance.destroy) {
            this.instance.destroy();
        }
    },
    methods: {
        insertScriptTag() {
            let editorScriptTag = document.getElementById('editorScriptTag');
            let configScriptTag = document.getElementById('configScriptTag');
 
            // 如果這個(gè)tag不存在，則生成相關(guān)代碼tag以加載代碼
            if (editorScriptTag === null) {
                configScriptTag = document.createElement('script');
                configScriptTag.type = 'text/javascript';
                configScriptTag.src = this.ueditorPath + 'neditor.config.js';
                configScriptTag.id = 'configScriptTag';
 
                editorScriptTag = document.createElement('script');
                editorScriptTag.type = 'text/javascript';
                editorScriptTag.src = this.ueditorPath + 'neditor.all.min.js';
                editorScriptTag.id = 'editorScriptTag';
                let s = document.getElementsByTagName('head')[0];
                s.appendChild(configScriptTag);
                s.appendChild(editorScriptTag);
            }
 
            // 等待代碼加載完成后初始化編輯器
            if (configScriptTag.loaded) {
                this.scriptTagStatus++;
            } else {
                configScriptTag.addEventListener('load', () => {
                    this.scriptTagStatus++;
                    configScriptTag.loaded = true;
                    this.initEditor();
                });
            }
 
            if (editorScriptTag.loaded) {
                this.scriptTagStatus++;
            } else {
                editorScriptTag.addEventListener('load', () => {
                    this.scriptTagStatus++;
                    editorScriptTag.loaded = true;
                    this.initEditor();
                });
            }
 
            this.initEditor();
        },
        initEditor() {
            // scriptTagStatus 為 2 的時(shí)候，說明兩個(gè)必需引入的 js 文件都已經(jīng)被引入，且加載完成
            if (this.scriptTagStatus === 2 && this.instance === null) {
                // Vue 異步執(zhí)行 DOM 更新，這樣一來代碼執(zhí)行到這里的時(shí)候可能 template 里面的 script 標(biāo)簽還沒真正創(chuàng)建
                // 所以，我們只能在 nextTick 里面初始化 UEditor
                this.$nextTick(() => {
                    this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig);
                    // 綁定事件，當(dāng) UEditor 初始化完成后，將編輯器實(shí)例通過自定義的 ready 事件交出去
                    this.instance.addListener('ready', () => {
                        this.$emit('ready', this.instance);
                    });
                });
            }
        }
    }
};
</script>
 
<style>
	.edui-editor {
    	line-height: normal;
	}
</style>

在使用頁面

import Editor from '你的component路徑/Editor.vue'

使用代碼：

<!--html片段 -->
<el-form-item label="獎品說明" prop="description" :error="prize.errors.description">
     <editor @ready="editorReady" :ueditorStyle="ueditorStyle">            
     </editor>
</el-form-item>
 
<!-- script片段 -->
 
import Editor from '你的component路徑/Editor.vue'
export default {
    data(){
        return {
            ueditorStyle: {//ueditor樣式
              width: '100%',
              height: '200px'
            },
        }
    },
    components:{
        Editor
    },
    methods:{
      editorReady (editor) {//保存ueditor內(nèi)容
        this.editor = editor
        if (this.$router.currentRoute.params.id > 0) this.fetch()
        editor.addListener('afterAutoSave', () => {
          this.prize.data.description = editor.getContent()
        })
      },
    },
}
 
 
<!-- 注意點(diǎn) -->
this.editor.setContent(編輯框內(nèi)的數(shù)據(jù))//設(shè)置ueditor框內(nèi)內(nèi)容，在編輯時(shí)使用

vue項(xiàng)目使用ueditor指南

基本使用

1.下載資源包

因?yàn)閡editor在npm上暫無官方依賴包，因此需要先到官網(wǎng)下載文件包，我下載的是jsp版本的

2.引入依賴文件

將下載后的文件夾命名為UE，并放入到項(xiàng)目static文件夾中，然后再main.js引入依賴文件（我這里是全局引入，也可以再使用的組件中引入）；

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min'

3.初始化ueditor

我這里是單獨(dú)將ueditor抽成一個(gè)組件，因此初始化時(shí)的id和配置都是從父組件傳入的。定義組件：

<template>
? <div>
? ? <script :id=id type="text/plain"></script>
? </div>
</template>
<script>
export default {
? name: 'UE',
? data () {
? ? return {
? ? ? editor: null
? ? }
? },
? props: {
? ? config: {
? ? ? type: Object
? ? },
? ? id: {
? ? ? type: String
? ? },
? ? content: {
? ? ? type: String
? ? }
? },
? mounted () {
? ? this._initEditor()
? },
? methods: {
? ? _initEditor () { // 初始化
? ? ? this.editor = UE.getEditor(this.id,this.config)
? ? },
? ? getUEContent () { // 獲取含標(biāo)簽內(nèi)容方法
? ? ? return this.editor.getContent()
? ? }
? },
? destroyed () {
? ? this.editor.destroy()
? }
</script>

4.使用組件：

(1).通過import引入定義好的組件；

import UE from '@/components/ueditor/ueditor.vue'

(2).在對應(yīng)的位置使用組件

<el-form-item label="文章內(nèi)容" prop="articleContent">
? <UE :id=id :config=config ?ref="ue"></UE>
</el-form-item>

(3).在父組件的data中定義初始化配置

// 初始化Ueditor配置參數(shù)
? ? ? config: {
? ? ? ? initialFrameWidth: null,
? ? ? ? initialFrameHeight: 300
? ? ? },
? ? ? id: 'container',// 不同編輯器必須不同的id

(4).在父組件中獲取編輯器內(nèi)容

// 獲取富文本內(nèi)容
? ? getEdiotrContent () {
? ? ? let content = this.$refs.ue.getUEContent() // 調(diào)用子組件方法
? ? ? this.articleData.articleContent = content
? ? }

使用配置

如果需要使用到圖片上傳功能就需要進(jìn)行在資源文件ueditor.config.js中正確配置資源路徑和圖片上傳路徑

資源加載路徑：window.UEDITOR_HOME_URL = "/static/UE/";

文件上傳路徑：serverUrl: 后臺接口地址

跳坑心得

1.開發(fā)環(huán)境正常使用，但生產(chǎn)環(huán)境樣式文件未加載，編輯器無法正常顯示，圖片上傳功能無法使用

（1）樣式文件未加載

在開發(fā)環(huán)境我配置的資源路徑是：window.UEDITOR_HOME_URL = "/static/UE/";

但當(dāng)我發(fā)布到生產(chǎn)環(huán)境時(shí)樣式完全亂了。

—— 這是因?yàn)槲掖a不是直接放在服務(wù)器根目錄，而是下級文件夾中，因此資源文件無法正確加載，因?yàn)樾枰_發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的window.UEDITOR_HOME_URL，當(dāng)然如果代碼放在根目錄，此處無需修改

（2）圖片上傳無法使用

—— 這是因?yàn)榈脑陂_發(fā)環(huán)境上傳路徑做了代理，而static文件不會被打包壓縮，在生產(chǎn)環(huán)境請求路徑就不對。

以上兩個(gè)問題，我做了如下配置：

? var serverApi = '';
? if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "productionTest") { // 生產(chǎn)/測試環(huán)境
? ? window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/";
? ? serverApi = "/newconsole/static/UE/config/getConfig"
? }else { // 開發(fā)環(huán)境
? ? window.UEDITOR_HOME_URL = "/static/UE/";
? ? serverApi = "/api/static/UE/config/getConfig"
? }
?
? var URL = window.UEDITOR_HOME_URL || getUEBasePath();
? ? ?/**
? ? ?* 配置項(xiàng)主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。
? ? ?*/
? ? window.UEDITOR_CONFIG = {
?
? ? ? ? //為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
? ? ? ? UEDITOR_HOME_URL: URL,
? ? ? ? // 服務(wù)器統(tǒng)一請求接口路徑
? ? ? ? serverUrl: serverApi
? ? ? }

這樣就可以很好的兼任開發(fā)環(huán)境和生產(chǎn)環(huán)境。

2.編輯器內(nèi)容過多時(shí)，會將編輯器撐開拉長，體驗(yàn)不好

這個(gè)問題處理就比較簡單了，只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可，這樣如果內(nèi)容過多時(shí)就會出現(xiàn)滾動條，而不會撐開編輯器。