layedit添加首行縮進

因爲在編輯的時候,有首行縮進的需求,而且,若是直接使用空格進行縮進,還會出現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" >&#xe66b;</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'
                        }
                    }

五、效果

相關文章
相關標籤/搜索