在vue中完美使用ueditor組件(cdn)解讀
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 配置項
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 {
// 為了避免麻煩,每個編輯器實例都用不同的 id
randomId: 'editor_' + (Math.random() * 100000000000000000),
instance: null,
// scriptTagStatus -> 0:代碼未加載,1:兩個代碼依賴加載了一個,2:兩個代碼依賴都已經(jīng)加載完成
scriptTagStatus: 0
};
},
created() {
if (window.UE !== undefined) {
// 如果全局對象存在,說明編輯器代碼已經(jīng)初始化完成,直接加載編輯器
this.scriptTagStatus = 2;
this.initEditor();
} else {
// 如果全局對象不存在,說明編輯器代碼還沒有加載完成,需要加載編輯器代碼
this.insertScriptTag();
}
console.log(this)
},
beforeDestroy() {
// 組件銷毀的時候,要銷毀 UEditor 實例
if (this.instance !== null && this.instance.destroy) {
this.instance.destroy();
}
},
methods: {
insertScriptTag() {
let editorScriptTag = document.getElementById('editorScriptTag');
let configScriptTag = document.getElementById('configScriptTag');
// 如果這個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 的時候,說明兩個必需引入的 js 文件都已經(jīng)被引入,且加載完成
if (this.scriptTagStatus === 2 && this.instance === null) {
// Vue 異步執(zhí)行 DOM 更新,這樣一來代碼執(zhí)行到這里的時候可能 template 里面的 script 標(biāo)簽還沒真正創(chuàng)建
// 所以,我們只能在 nextTick 里面初始化 UEditor
this.$nextTick(() => {
this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig);
// 綁定事件,當(dāng) UEditor 初始化完成后,將編輯器實例通過自定義的 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()
})
},
},
}
<!-- 注意點 -->
this.editor.setContent(編輯框內(nèi)的數(shù)據(jù))//設(shè)置ueditor框內(nèi)內(nèi)容,在編輯時使用vue項目使用ueditor指南
基本使用
1.下載資源包
因為ueditor在npm上暫無官方依賴包,因此需要先到官網(wǎng)下載文件包,我下載的是jsp版本的
2.引入依賴文件
將下載后的文件夾命名為UE,并放入到項目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
我這里是單獨將ueditor抽成一個組件,因此初始化時的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)境時樣式完全亂了。
—— 這是因為我代碼不是直接放在服務(wù)器根目錄,而是下級文件夾中,因此資源文件無法正確加載,因為需要開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的window.UEDITOR_HOME_URL,當(dāng)然如果代碼放在根目錄,此處無需修改
(2)圖片上傳無法使用
—— 這是因為的在開發(fā)環(huán)境上傳路徑做了代理,而static文件不會被打包壓縮,在生產(chǎn)環(huán)境請求路徑就不對。
以上兩個問題,我做了如下配置:
? 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();
? ? ?/**
? ? ?* 配置項主體。注意,此處所有涉及到路徑的配置別遺漏URL變量。
? ? ?*/
? ? window.UEDITOR_CONFIG = {
?
? ? ? ? //為編輯器實例添加一個路徑,這個不能被注釋
? ? ? ? UEDITOR_HOME_URL: URL,
? ? ? ? // 服務(wù)器統(tǒng)一請求接口路徑
? ? ? ? serverUrl: serverApi
? ? ? }這樣就可以很好的兼任開發(fā)環(huán)境和生產(chǎn)環(huán)境。
2.編輯器內(nèi)容過多時,會將編輯器撐開拉長,體驗不好
這個問題處理就比較簡單了,只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可,這樣如果內(nèi)容過多時就會出現(xiàn)滾動條,而不會撐開編輯器。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化,在實際的前端開發(fā)過程中,動態(tài)適配是一個非常重要的問題,在數(shù)據(jù)可視化的場景下,圖表的動態(tài)適配尤為重要,需要的朋友可以參考下2023-05-05
v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案
在使用 elementui 表單的過程中,某些表單項需要通過 v-if 來判斷是否展示,但是這些表單項出現(xiàn)了檢驗失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案,感興趣的朋友一起看看吧2024-01-01
vue使用富文本編輯器vue-quill-editor的操作指南和注意事項
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項,需要的朋友可以參考下2023-05-05
vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-02-02
vue項目設(shè)置scrollTop不起作用(總結(jié))
這篇文章主要介紹了vue項目設(shè)置scrollTop不起作用(總結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12

