Wangeditor自適應，代碼塊，上傳圖片（express）

前言：第一次用富文本就直接上手了wangeditor了。遇到了一些問題和本身的解決方法記錄。小老弟的博客： leoon.design  ，文章也首發於博客嘻嘻

1.工具欄自適應

已經操做上手的同窗可能已經發現了，這個富文本的工具欄是不換行的，緣由是換行太醜了，做者默認他不許換行（這話是真的，文檔可見）。處理手段也很簡單暴力， F12打開檢查工具欄什麼影響了他，不斷操做影響佈局的樣式。得出結果。

<div style="width: 100%"><div id="editor" class="editor"></div> //這是個人建立富文本代碼，width=100%哦</div> $(".w-e-toolbar").css("flex-wrap", "wrap"); //建立完編輯器後，用JQ給他修改下flex-wrap複製代碼

這樣就直接能夠自適應了。什麼？你還想高度填滿？個人手段就是。

首先進入wangeditor.js這個文件，定位到4402行左右，或者你本身f12看看如何快速定位到這個正文欄設置大小。做者已經給他的高度設置了默認大小好像是300px左右，我給他寫了個靈活點的。以下圖

2.代碼塊和其餘一些樣式的注意事項

表情那些我沒用，代碼塊這些是死的，因此比較好改。咱們在富文本里面寫代碼塊能夠有邊框樣式，可是顯示到前臺，就沒有了。緣由是咱們須要本身在前臺給正文這塊設置樣式。

代碼塊的標籤是：pre；

前言是:blockquote;

固然這些你均可以本身f12看看是啥，而後在富文本里看看他的樣式怎麼寫的，你也能夠自定義之類的

這裏還要注意的是，前臺正文的圖片一致要設置 max-width，否則撐開div咯

3.上傳圖片，基於express。

這裏搞了很久。直接先附上先後臺代碼，我是先後端分離的。這裏主要也就是請求路徑不一樣而已。重點：建議wangeditor的1,2,3代文檔均可以看看。看雲那裏點擊做者就能夠看到三代的文檔了。我這個是看了文檔，加在github上看了一個大佬的源碼的。

大概這樣就大功告成了。遺憾的是代碼高亮解決不了，貌似3開始不支持highlight了，源碼在開頭博客，掘金好像會自動壓縮。。