layedit添加首行缩进

由于在编辑的时候，有首行缩进的需求，并且，如果直接使用空格进行缩进，还会出现layedit看到的效果和实际显示的效果不一致的情况。多方搜索无果，于是决定修改源代码。具体步骤如下：

1、首先找到layedit.js文件，打开

路径位置如下：layui/lay/modules/layedit.js，我是在Kz.layedit的基础上进行修改的，关于Kz.layedit，它是这位大佬在layedit的基础上进行的扩展：https://gitee.com/KnifeZ/Kz.layedit

2、在工具面板添加首行缩进图标

搜索“全部工具”，定位到如下位置：

添加首行缩进图标：

,indent:'<i class="layui-icon layedit-tool-indent" title="首行缩进" layedit-event="indent" ></i>'

在使用layedit.build()函数渲染富文本编辑器的时候，添加此工具：

3、设置工具的选中效果

搜索“对其”定位到如下位置，并添加工具按钮的选中效果：

代码如下：

                    //首行缩进if (textIndent === '2em'){item('indent').addClass(CHECK);}else {item('indent').removeClass(CHECK);}

这其中的textIndent需要在这里添加定义：

代码如下：

, textIndent = this.style.textIndent;

4、搜索“触发工具”，定位到如下位置，并添加首行缩进实现代码

首行缩进作为一个方法，添加进来，方法名为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'}}

5、效果

layedit添加首行缩进相关推荐

在WordPress后台文章编辑器添加首行缩进2字符的按钮
在WordPress后台文章编辑器添加首行缩进2字符的按钮 2016-12-10 14:51 网页设计标签:wordpress 模板代码 2358 发表评论受到z-blog ...
php段落首行缩进2字符,WordPress文章段落自动缩进两个字符方法
我们通常写文章时,段落首行都会空两格,可是WordPress自带的编辑器却没有考虑到这一点,导致发布的文章首行都是顶格的,看起来很不习惯. 我们通常的解决方法都是在发布文章时把编辑器切换到" ...
博客写作小技巧【2】：段落首行缩进、添加分割线……
目录一.首行缩进 1. 方法一 2.方法二二.分割线三.快速使改变字体颜色 1. 使字体变为红色 2. 使字体变为黄色一.首行缩进 1. 方法一 <p> 输入内容</p&g ...
td 首行缩进_工作中常用的CSS整理
一.文本样式 1. 文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{ width:200rpx; overflow: hidden; text-overflow:ellipsis ...
css设置字体颜色、文本对齐方式、首行缩进、文本装饰、列表样式、鼠标样式、禁止文本域拖拽、轮廓线、块级元素对齐方式、文字溢出设置
color:设置字体颜色: 取值方式有:1.颜色值red,green等 .2.十六进制#FF0000,#FF2313等.3.RGB代码rgb(225,225,112)或rgb(100%,55%,0%) ...
word整个表格首行缩进_Word排版对不齐？别忘了这个明星按键
办公室小娜起草了一份制度,可是刚提交给领导就被打回来了. 今天就讲一下Tab键的制表与切换用法,解锁新姿势. 制表位在Word中的作用既然Tab是制表键,那么在Word中是不是也是用来绘制没有线条的 ...
Markdown首行缩进解决方法实例
文章目录前言一.首行缩进转换成HTML后就没有了? 二.首行缩进方法 1.方法一:手动添加html可以识别的空格 2.方法二:使用脚本的方式对单个文件批量替换前言通过Markdown写的文 ...
换行样式不要首行缩进_修改文档样式库中的“正文”样式，使得文档中所有正文段落首行缩进2个字符。...
问答题请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作.注意:以下的文件必须都保存在考生文件夹下.在考生文件夹下打开文档WORD．DOCX.[背景素材]为了更好地介绍公司的服 ...
java pdf 首行缩进_java使用iText生成pdf文档的对齐方式
一.前言在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生成PDF报表,客户端采用超级连接显示或 ...

layedit添加首行缩进

layedit添加首行缩进相关推荐

最新文章

热门文章