layedit添加首行縮進

因爲在編輯的時候，有首行縮進的需求，而且，若是直接使用空格進行縮進，還會出現layedit看到的效果和實際顯示的效果不一致的狀況。多方搜索無果，因而決定修改源代碼。具體步驟以下：

一、首先找到layedit.js文件，打開

路徑位置以下：layui/lay/modules/layedit.js，我是在Kz.layedit的基礎上進行修改的，關於Kz.layedit，它是這位大佬在layedit的基礎上進行的擴展：https://gitee.com/KnifeZ/Kz.layedit

二、在工具面板添加首行縮進圖標

搜索「所有工具」，定位到以下位置：

添加首行縮進圖標：

,indent:'<i class="layui-icon layedit-tool-indent" title="首行縮進" layedit-event="indent" >&#xe66b;</i>'

在使用layedit.build()函數渲染富文本編輯器的時候，添加此工具：

三、設置工具的選中效果

搜索「對其」定位到以下位置，並添加工具按鈕的選中效果：

代碼以下：

//首行縮進
                    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'
                        }
                    }

五、效果