最近需要用到富文本編輯器插件,項(xiàng)目是用VUE框架搭建的 所以這里就專門介紹幾款有關(guān)vue的富文本插件:
項(xiàng)目中趟過了很多坑,特記下供大家借鑒,希望大家不要重滔我的復(fù)撤 本文章只介紹插件 具體使用方式可自行百度
由于編輯器編輯的內(nèi)容需要在小程序 能完美顯示,并且能和小程序富文本編輯器完全打通
1.百度的ueditor (網(wǎng)上都這么說(shuō))(沒有緣分,果斷放棄)
優(yōu)勢(shì)：開源，插件多，基本滿足各種需求彭则， 由百度web前端研發(fā)部開發(fā)。
不足：比較龐大球凰，對(duì)于網(wǎng)頁(yè)的加載來(lái)說(shuō)来颤，會(huì)相對(duì)影響速度 ,界面不太美觀冠绢。
官方的wiki文檔并不是很完善码党，圖片只能上傳到本地服務(wù)器德崭，如果需要上傳到其他服務(wù)器需要改動(dòng)源碼，較為難辦揖盘，加載速度慢眉厨。
2.bootstrap-wysiwyg? (網(wǎng)上都這么說(shuō))(不能滿足需求,果斷放棄)
優(yōu)點(diǎn)：外觀簡(jiǎn)潔大方，使用方便扣讼，支持網(wǎng)站充分利用Bootstrap缺猛、Font Awesome等工具庫(kù)的優(yōu)秀特性
沒有強(qiáng)制規(guī)定的樣式缨叫。
缺點(diǎn)：沒有表情包 , 沒有開發(fā)文檔不便于閱讀使用椭符，無(wú)字體變色荔燎，無(wú)視頻上傳功能
以上兩個(gè)插件我沒使用,可能是真的因?yàn)榫壏植粔虬?如果你喜歡盡管拿去用
下面介紹一下我的漫漫入坑路 從Vue-Quill-Editor 說(shuō)起吧
第一個(gè)編輯器
這個(gè)編輯器還是可以的 頁(yè)面簡(jiǎn)單大氣 上手快,文檔配置簡(jiǎn)單,在管理后臺(tái)中使用完全no problem,
當(dāng)我把上傳圖片 還有數(shù)據(jù)綁定都做好 覺得工作怎么會(huì)如此簡(jiǎn)單的時(shí)候 改了一下字體 發(fā)現(xiàn)編輯器會(huì)給span 標(biāo)簽添加類名,然而你必須要引入類名樣式才能顯示對(duì)應(yīng)樣式,這不是開玩笑嗎 為什么要這么設(shè)計(jì)啊,是不是應(yīng)該寫到span 的行內(nèi)樣式里,一般管理后臺(tái)用的話 前臺(tái)還要引一下css文件 這不符合常理啊作者.
最后小程序的富文本編輯器里不支持外部樣式.
唉心塞...? 所以還是換編輯器吧 對(duì)吧 又不是就這一個(gè) 所以信心滿滿
換編輯器 必須換
Vue-html-Editor
vue-quil-editor vue-html-editor 何等的相似, 一樣的優(yōu)勢(shì) 一樣的配置 頁(yè)面簡(jiǎn)單大氣上檔次
但是 問題又來(lái)了 微信小程序 富文本編輯器根本不支持font 標(biāo)簽? 漂亮!!!
換編輯器 必須換
所以就有了接下來(lái)的Wangeditor
這是一個(gè)文檔齊全 上手特別容易,有可視化編輯器demo 預(yù)覽的地表最強(qiáng)編輯器,我覺得這一點(diǎn)特別好 最起碼能讓我們開發(fā)者在用之前知道你這個(gè)開源插件UI 是什么樣的,能不能滿足用戶的需求 不是說(shuō)把代碼跑起來(lái)我才能知道你這個(gè)編輯器長(zhǎng)什么樣,浪費(fèi)了開發(fā)者的時(shí)間和精力 到最后還不能用.
那就開始碼代碼吧 因?yàn)橛辛酥暗慕?jīng)驗(yàn) 先看了一下結(jié)果獲取到的html? 結(jié)果 涼涼夜色為我思念成河 化作春泥呵護(hù)了我。销钝。有咨。
一樣的font 標(biāo)簽 一樣的font-size 屬性 ,實(shí)在不想再換編輯器了 沒辦法 源碼改不動(dòng)? replice 替換吧? 需要把所有的font 標(biāo)簽替換成span 還得把font的font-size 屬性 和color 屬性 改為行內(nèi),心塞,講道理 這不符合常理啊,
換編輯器 必須換
kindeditor
主要特點(diǎn)
快速：體積小，加載速度快
開源：開放源代碼蒸健，高水平座享，高品質(zhì)
底層：內(nèi)置自定義 DOM 類庫(kù)，精確操作 DOM
擴(kuò)展：基于插件的設(shè)計(jì)似忧，所有功能都是插件渣叛，可根據(jù)需求增減功能
風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個(gè) CSS 文件
兼容：支持大部分主流瀏覽器盯捌，比如 IE淳衙、Firefox、Safari饺著、Chrome箫攀、Opera
這是官方解釋, 說(shuō)的我都信了 那就用用吧
果然滿足我了我所有的需求 完美的能和小程序?qū)悠饋?lái)? 不管是從前端顯示 還是在小程序 富文本編輯器里顯示都能兼容, 就是ui 長(zhǎng)的有點(diǎn)丑,沒辦法,誰(shuí)讓功能強(qiáng)大呢,丑點(diǎn)就丑點(diǎn)吧 ,沒想到坑在后面,就是編輯器沒有暴露自定義上傳參數(shù),比如上傳圖片到服務(wù)器的時(shí)候需要從Header 傳個(gè)token,怎么辦,涼拌,也不知道網(wǎng)上哪位大佬改了一下他的源碼重寫了圖片上傳,
kindEditor富文本初始化問題以及上傳圖片請(qǐng)求頭攜帶token
好人啊
所以多圖上傳呢,還得改代碼? 唉心塞...
先冷靜一下,最后還是在這幾個(gè)編輯器里擇優(yōu)選擇了Wangeditor 在他的基礎(chǔ)上來(lái)滿足我的需求
找了很多資料最后一行代碼解決問題?
styleWithCSS? = true
可以把font 替換成span?
最后再推薦一下Wangeditor 雖然官方還在維護(hù),還有很多問題,但是我還是比較看好他的,能夠滿足自己需求的編輯器就是好的編輯器
兜兜轉(zhuǎn)轉(zhuǎn)還在又回到Wangeditor 如果你是大佬可能不會(huì)走這么多彎路,直接在源碼上拓展就能實(shí)現(xiàn)你的功能,還是能力不夠吧,希望有時(shí)間能夠自己手寫一個(gè)富文本編輯器
如果你只是需要一個(gè)編輯器 其實(shí)任意一款都可以,如果你想和微信小程序兼容起來(lái),Wangeditor首選
