摘要:優秀的富文本編輯器有很多,比如,等,但并不是每個都能在移動端有很好的表現。是百度的老牌富文本編輯器,但界面有一股上世紀的感覺,官網最新的一條動態停留在。
優秀的富文本編輯器有很多,比如:UEditor,wangEditor 等,但并不是每個都能在移動端有很好的表現。
我們暫且不討論移動端是否真的需要富文本,既然有這需求,就把它實現出來。
失敗的嘗試正確的選擇是成功的開始,開發之前肯定要做一些調研。
通過各種資料搜集,確定了幾個備選的:UEditor,vue-quill-editor,wangEditor,vue-html5-editor ,tinymce。
UEditor 是百度的老牌富文本編輯器,但界面有一股上世紀的感覺,官網最新的一條動態停留在 2016-05-18。官方已經多年不維護了,但民間教程資料很多,所以最后一個嘗試吧,其他的搞不定再用 UEditor 。
wangEditor 的確讓人眼前一亮,用官方的話來說就是輕量、簡潔、易用、開源免費。覺得這個不錯,首先在項目中嘗試它。遺憾的發現 wangEditor 在移動端的表現有些讓人失望,比如我要設置一個 H1 標題,時靈時不靈的,有時能設置成功,有時不能,大多數時候都不成功,不知道是不是我操作的問題。
接下來嘗試 vue-html5-editor ,看介紹還挺好的。按照教程一頓操作后,編輯器并沒有在頁面上如期而至… 排查了好多次都沒有找到問題在哪里,算了吧… 還好還有其他選擇。
終于找到你然后嘗試用vue-quill-editor,之所以一開始不用,是因為文檔都是英文的… 英文文檔畢竟沒有中文看著舒服,所以先嘗試有中文文檔的框架。誰曾想其他幾個太不爭氣了,只好用這個。在移動端的效果出人意料的好,看一下真實效果:
完美支持各種文字效果,還能插入圖片,編輯器的外觀也挺好看,就它了!
在項目中使用在項目中快速集成,需要兩個文檔:vue-quill-editor 的 github 主頁 和 Quill 官網。
基礎的使用方式在 vue-quill-editor 都有介紹,如果想做一些個性化配置,就需要看 Quill 官網 關于各種屬性的文檔了。
下面說一下我集成的步驟:
1. 安裝 vue-quill-editornpm install vue-quill-editor —save
2. 全局引入
在 main.js 中將 vue-quill-editor 引入項目
import Vue from "vue"
import VueQuillEditor from "vue-quill-editor"
// require styles
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
Vue.use(VueQuillEditor, /* { default global options } */)
其中 Vue.use(VueQuillEditor, /* { default global options } */) 第二個參數是 Quill 的配置。在這里我只改了默認的 placeholder 提示語,所以最后一行應該是:
Vue.use(VueQuillEditor, {
placeholder: "請輸入內容",
});
詳細的配置請參考 Quill 官網
3. 代碼中使用直接使用
完整代碼
上圖效果的代碼如下:
與公司業務強相關的部分數據和接口做了刪減。
有兩個點需要注意:
編輯器默認的輸入框高度很高,導致輸入框與其他內容重疊,可通過最后兩段樣式來更改輸入框的高度。
可以在一個頁面上顯示多個富文本輸入框,本例中就將輸入框放在了 v-for 循環里。如何區分每個輸入框的值呢?只需在綁定時 v-model="messages[index]" 利用 index 綁定對應的數組位置即可。
以上就是 vue-quill-editor 在實際項目中的使用。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7851.html
摘要:獨立完成一個移動端項目不是很明白為何會有這樣的商品管理后臺,還是有些經驗不足,包括對產品的全局思考,對插件的選擇等,都有考慮不周的缺點,導致自己中途想換圖形界面插件,浪費了點時間,這里記錄下,總結下經驗,理一下思路。 獨立完成一個移動端項目(不是很明白為何會有這樣的商品管理后臺),還是有些經驗不足,包括對產品的全局思考,對插件的選擇等,都有考慮不周的缺點,導致自己中途想換圖形界面插件,...
摘要:在工作中肯定會遇到使用富文本編輯器的時候接下來我們就來一起學習一下注本項目是在的腳手架中搭建下載配置在中引入引入富文本工具在中使用創建文件在頁面添加元素在項目中顯示引入他你也可為他添加樣式想要獲取輸入的內容你可以 在工作中肯定會遇到使用富文本編輯器的時候 接下來我們就來一起學習一下 vue-quill-editor 注: 本項目是在vue的腳手架中搭建 1.下載 npm insta...
摘要:由出品的前端開源項目周報第二期來啦。我們的前端開源周報集合了一周來新收錄的優質的前端開發方面的開源項目,方便前端開發人員便捷的找到自己需要的項目工具等。 由OpenDigg?出品的前端開源項目周報第二期來啦。我們的前端開源周報集合了OpenDigg一周來新收錄的優質的前端開發方面的開源項目,方便前端開發人員便捷的找到自己需要的項目工具等。 react-fix-it 根據error自動生...
摘要:由出品的前端開源項目周報第二期來啦。我們的前端開源周報集合了一周來新收錄的優質的前端開發方面的開源項目,方便前端開發人員便捷的找到自己需要的項目工具等。 由OpenDigg?出品的前端開源項目周報第二期來啦。我們的前端開源周報集合了OpenDigg一周來新收錄的優質的前端開發方面的開源項目,方便前端開發人員便捷的找到自己需要的項目工具等。 react-fix-it 根據error自動生...
閱讀 2953·2021-11-24 09:39
閱讀 2861·2021-09-29 09:34
閱讀 3557·2021-09-24 10:23
閱讀 1742·2021-09-22 15:41
閱讀 1696·2019-08-30 15:55
閱讀 3511·2019-08-30 13:58
閱讀 2619·2019-08-30 13:11
閱讀 1666·2019-08-29 12:31