個人看法:主要是為了後台可以進行編輯,就好比你在公眾號寫文章,也是基於富文本編輯器來寫的。
(2.1)summernote支援bootstrap前端框架:http://www.bootcss.com/, 現在bootstrap使用非常普遍了,最主要的亮點就是響應式佈局,而且手機(行動裝置)優先。非常適合現在龐大的手機用戶瀏覽。所以summernote也非常適合在手機進行文字編輯
(2.2)bootstrap也有自備的富文本編輯器:bootstrap-wysiwyg,但是為什麼不用這個呢?原因是summernote可以插入影片。但是其他很多富文本編輯器也可以插入影片啊?我說的是國內的視頻,其他國外富文本編輯器大多數只能插入YouTube了,而summernote很神奇,可以插入騰訊視頻,優酷的也行,所以非常推薦編輯文本時候需要插入視頻的小編使用summernote。
(2.3)summernote真的非常簡潔,但是功能卻很完善,還可以自訂工具欄,emoji也不例外,但是由於關於summernote插入emoji的文章用法大部分都是在本地加載emoji,可以參考一下:https ://github.com/summernote/awesome-summernote 和https://github.com/nilobarp/summernote-ext-emoji,但是對於在本地加載emoji,會跟我刪除圖片發生衝突了,所以我就沒有加上emoji功能,還有一種方法是通過ajax獲取api.github.emoji服務器的鏈接,再通過鏈接添加,不過這個啊Jun真不會用了。
(2.4)summernote可以直接透過summernote('code')取得文字方塊的值,也就是html的body程式碼,可以直接上傳到資料庫或提交給後台。
(3.1)因為summernote自備的函數只會將圖片轉為base64格式保存起來,所以如果保存在數據庫裡,將會非常吃力,一張隨便的圖片都要幾個M,吃不消啊,所以改寫成保存在伺服器上,再上傳圖片在伺服器上的地址給資料庫就好多了
(3.2)在很多其他部落格都看到有summernote的圖片上傳的改寫保存到伺服器中,但是很可惜,都是貼上程式碼就不管了,而且,基本上都是只保存,沒有刪除的,我想假如插入圖片錯誤,但是又不能刪除,那就太遺憾了,所以我就打算寫一個即可上傳也可刪除圖片的summernote版本。其實跟我上一篇的思路一樣,只是有些地方注意一下就行:jQuery的$.ajax()與php後台交互,利用MutationObserver進行圖片刪除
(3.3)會用ajax的應該都沒有問題了,所以改寫onImageUpload也是利用了jQuery的ajax()來與後台交互的,因為ajax()也支援File類型,所以就用FormData類型進行交互。
(3.4)會改寫的就沒問題,我只是為了方便不會改寫的,後台我是用php寫的,但是其他類型的後台寫起來也比較簡單,程式碼就10來行。
(4.1)插入一張比較大的圖可能會有報錯,原因在於php.ini文件,第一個原因主要是圖片大小超出允許的範圍,這個問題可以透過修改php.ini的max_execution_time或post_max_size又或者upload_max_filesize可以解決,我就不多說了,參考別人的經驗:http://blog.csdn.net/anan890624/article/details/51859863
(4.2)第二個原因也是在php.ini文件,不過不是大小限制,而是文件的臨時存儲文件找不到,在php.ini的upload_tmp_dir裡可能原本沒有定義,所以需要修改,下面就是我在此基礎上作的修改。
(4.3)修改完php.ini後一定要重新啟動伺服器,否則即使改了也會出錯