因爲在編輯的時候,有首行縮進的需求,而且,若是直接使用空格進行縮進,還會出現layedit看到的效果和實際顯示的效果不一致的狀況。多方搜索無果,因而決定修改源代碼。具體步驟以下:javascript
一、首先找到layedit.js文件,打開java
路徑位置以下:layui/lay/modules/layedit.js,我是在Kz.layedit的基礎上進行修改的,關於Kz.layedit,它是這位大佬在layedit的基礎上進行的擴展:https://gitee.com/KnifeZ/Kz.layeditgit
二、在工具面板添加首行縮進圖標編輯器
搜索「所有工具」,定位到以下位置:函數
添加首行縮進圖標:工具
,indent:'<i class="layui-icon layedit-tool-indent" title="首行縮進" layedit-event="indent" ></i>'
在使用layedit.build()函數渲染富文本編輯器的時候,添加此工具:ui
三、設置工具的選中效果this
搜索「對其」定位到以下位置,並添加工具按鈕的選中效果:spa
代碼以下:code
//首行縮進 if (textIndent === '2em'){ item('indent').addClass(CHECK); }else { item('indent').removeClass(CHECK); }
這其中的textIndent須要在這裏添加定義:
代碼以下:
, textIndent = this.style.textIndent;
四、搜索「觸發工具」,定位到以下位置,並添加首行縮進實現代碼
首行縮進做爲一個方法,添加進來,方法名爲indent,這個和前面添加工具時的layedit-event="indent"是對應的:
代碼以下:
//首行縮進 , indent: function (range) { var container = getContainer(range); var indent = container.parentNode.style.textIndent; if (indent === '2em'){ container.parentNode.style.textIndent = ''; }else { container.parentNode.style.textIndent = '2em' } }
五、效果