這次帶給大家Vue2.0怎麼實作一個富文本編輯器,Vue2.0實作富文本編輯器的注意事項有哪些,下面就是實戰案例,一起來看一下。
在vue的'專案中遇到了需要使用富文本編輯器的需求,在github上看了很多vue封裝的editor插件,很多對圖片上傳和視頻上傳的支持並不是很好,最終還是決定使用UEditor。
這類的文章網路上有很多,我進行了摸索、手寫程式碼、總結、排版,形成了這篇文章。
下載對應的UEditor來源碼
# 首先,到官網上下載UEditor的源碼,根據你後台語言的不同下載對應的版本(PHP、Asp、.Net、Jsp)。
http://ueditor.baidu.com/website/download.html
下載之後,把資源放到 /<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>/ue/
靜態目錄下。
(我把UEditor放到了static
靜態目錄下面,這裡的檔案不會被webpack
打包,當然你也可以選擇性地放進src中)
編輯 UEditor 編輯器 設定檔
我們開啟 ueditor.config.js
,修改其中的window.UEDITOR_HOME_UR
配置,如下:
window.UEDITOR_HOME_URL = "/static/UE/"; //指定编辑器资源文件根目录 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js
檔案有很多配置,可以在這裡進行一些初始化的全域配置,例如編輯器的預設寬高等:
,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 ,initialFrameHeight:320 //初始化编辑器高度,默认320
其他的參數配置,在該文件中有詳細列出,或參考官方文件 http://fex.baidu.com/ueditor/
將編輯器整合到系統中
開啟 /src/main.js 文件,插入下面的程式碼:
//ueditor 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.js'
開發公用元件 UE.vue
我們在 /src/components/
目錄下建立 UE.vue
文件,作為我們的編輯器元件檔案。
以下程式碼提供簡單功能,具體使用根據需求完善該元件即可。
<template> <p> <script type="text/plain"></script> </p> </template> <script> export default { name: 'ue', data () { return { editor: null } }, props: { value: '', config: {} }, mounted () { this.editor = window.UE.getEditor('editor', this.config); this.editor.addListener('ready', () => { this.editor.setContent(this.value) }) }, methods: { getUEContent () { return this.editor.getContent() } }, destroyed () { this.editor.destroy() } } </script>
元件暴露了兩個介面:
value
是編輯器的文字
#
config
是編輯器的設定參數
# 在其他頁面中使用該元件
簡單地建立一個需要UEditor的頁面,再在該頁面中使用剛才封裝好的UE.vue元件:
<template> <p> <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter> <button @click="returnContent">显示编辑器内容</el-button> <p>{{dat.content}}</p> </p> </template> <script> import Uediter from '@/components/UE.vue'; export default { data () { return { dat: { content: '' }, ueditor: { value: '编辑器默认文字', config: { initialFrameWidth: 800, initialFrameHeight: 320 } } } }, methods: { returnContent () { this.dat.content = this.$refs.ue.getUEContent() } }, components: { Uediter }, } </script>
配置完上述內容後,控制台可能會出現"後台配置項返回格式出錯,上傳功能將不能正常使用!"的報錯,
我們在編輯器中上傳圖片或者視頻,也會出現響應的報錯,這是因為沒有配置伺服器的請求接口,在ueditor.config.js中,對serverUrl進行配置:
// 服务器统一请求接口路径 , serverUrl: 'http://172.16.254.49:83/File/UEditor' //地址管你们后端要去
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
AngularJS中@HostBinding()和@HostListener()的使用差異
以上是Vue2.0怎麼實作一個富文本編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章!