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