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

layui是一款經(jīng)典前端技術(shù)構(gòu)建的前端框架，雖然官網(wǎng)都下線了，但是對(duì)于很多后端開發(fā)人員來(lái)說(shuō)還是很不錯(cuò)的，使用起來(lái)非常簡(jiǎn)單，當(dāng)然在某些場(chǎng)景下對(duì)于前臺(tái)開發(fā)也是非常便捷的，并不是每個(gè)場(chǎng)景的開發(fā)都需要使用新的技術(shù)方案，要知道技術(shù)本質(zhì)上還是服務(wù)我們的。而如果使用了layui的項(xiàng)目，且只需要進(jìn)行簡(jiǎn)單的富文本編輯工作，個(gè)人覺(jué)得就沒(méi)必要再另外引入其他的獨(dú)立編輯器了。

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

比如默認(rèn)的富文本框的樣式，是在源碼中內(nèi)聯(lián)的style 樣式?jīng)Q定的，沒(méi)有參數(shù)項(xiàng)在調(diào)用組件時(shí)設(shè)置自定義的css，只能是下圖的默認(rèn)樣式：

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

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

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

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

這樣在調(diào)用layui.layedit組件的時(shí)候，我們可以設(shè)置的參數(shù)多了一個(gè)(多的參數(shù)為css)，這樣我們?cè)谡{(diào)用的時(shí)候可以這樣設(shè)置自定義css了。

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

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