在互聯(lián)網中，開源的富文本編輯器有很多，比如我個人喜歡使用的就是WordPress自帶的TinyMCE，而國內使用最廣泛的應該就屬ueditor、ckeditor、kindeditor等，這些主流編輯器其實功能都非常強大，功能強大也就意味著體積臃腫。

layui是一款經典前端技術構建的前端框架，雖然官網都下線了，但是對于很多后端開發(fā)人員來說還是很不錯的，使用起來非常簡單，當然在某些場景下對于前臺開發(fā)也是非常便捷的，并不是每個場景的開發(fā)都需要使用新的技術方案，要知道技術本質上還是服務我們的。而如果使用了layui的項目，且只需要進行簡單的富文本編輯工作，個人覺得就沒必要再另外引入其他的獨立編輯器了。

因為layui自帶了一個簡單的layedit組件，可以支持加粗、斜體、下劃線、刪除線、左對齊、右對齊、居中對象、超鏈接、刪除超鏈接、表情、插入圖片、插入代碼等日常需要使用的格式化功能，當然也可以根據(jù)自己需要在此基礎上進行定制。當然layedit組件自帶支持的功能還是很少，但少意味著簡單，而且對于比如編輯一條簡單格式的圖文消息一類的場景還是夠用了。也許是由于他比較簡單，所以配置項很少，根據(jù)其官方文檔基本就只有如下幾個參數(shù)設置：

比如默認的富文本框的樣式，是在源碼中內聯(lián)的style 樣式決定的，沒有參數(shù)項在調用組件時設置自定義的css，只能是下圖的默認樣式：

而我們有時候期望的需要跟我們前端自定義的css一致，也就是所見即所得，這個時候就需要我們自定義編輯框的css。如下圖：

因此需要自己動手修改源代碼（該框架許可協(xié)議允許用戶修改源代碼），通過前端觀察可以看到，編輯器默認css樣式是style內聯(lián)的，所以源代碼應該在組件js中約定的。

解壓組件源代碼，可以找到源碼中定義這些樣式的位置（大概在15900行左右）：

我們可以在此處添加一點代碼即可添加一個參數(shù)是設置項，源代碼為（紅框中的為添加的代碼）：

這樣在調用layui.layedit組件的時候，我們可以設置的參數(shù)多了一個(多的參數(shù)為css)，這樣我們在調用的時候可以這樣設置自定義css了。

layedit.set({
   height:height
   ,css:Config.layui_exts+'edit.css'  //這是自定義css，原來是沒有這個可設置參數(shù)的
   ,uploadImage: {
	url: API.editImageAPI //接口url
	,type: 'post' //默認post
   }
});

這樣就可以完成layui.layedit組件自定義css了，當然也可以直接修改源碼中style部分，但個人覺得直接添加一個css參數(shù)設置項更優(yōu)雅一點。其實除此之外其他的地方也可以根據(jù)自己需要進行修改，比如插入圖片的參數(shù)項uploadImage默認情況下可以設置的參數(shù)很有限，如果不修改不能完成更復雜的圖片上傳，比如前端拉取上傳憑證token直傳到七牛云OSS上，不進行修改，是不能通過設置項直接完成操作的，通過微調源碼，增加參數(shù)項也可以完成這樣的需求，當然前提是你能讀懂理解組件的源代碼。