由于在编辑的时候,有首行缩进的需求,并且,如果直接使用空格进行缩进,还会出现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添加首行缩进的更多相关文章

  1. [整理][LaTex]小技巧之——首行缩进

    0. 简介 在LaTex编辑时,有时会遇到这样一个有关于首行缩进的问题.在汉语环境的编辑下,习惯上每段会进行一个两个字的缩进.但是在默认编辑模式下,一个章节下的首段是没有首行缩进的,本文的目的主要是解 ...

  2. WordPress文章首行缩进

    WordPress后台编辑文章的时候会自动删除多余的空格,也就是说,你在后台编辑文章的时候添加的一些空格和换行在前台都是看不见的,都是被WordPress忽略了的,今天就讲讲怎么给所有文章添加首行缩进 ...

  3. CSS中字距,词距,首行缩进,字体大小,排版相关问题的探讨

    先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...

  4. UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性(NSMutableAttributedString)

    text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...

  5. Unity中Text中首行缩进两个字符和换行的代码

    1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行    “\n” 补充 Uni ...

  6. css —— 图片环绕+首行缩进

    1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...

  7. HTML5 的段落首行缩进

    text-indent:0em;表示当前行不需要缩进,文本顶头开始.这个属性可以用在  div  p等元素下面 文本首行的缩进(在首行文字之前插入指定的长度) p { line-height: 2em ...

  8. p便签,去掉首行缩进

    <p>fdsfdsfs</p> 使用P标签是,会自动的加上首行缩进,如果想去掉首行缩进,可以使用text-indent属性 <p style="text-ind ...

  9. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

随机推荐

  1. PHP Laravel5实现的RBAC权限管理操作示例

    根据不同的权限,在菜单栏显示不同的功能,只对菜单进行了限制,若对路由也进行限制,可以根据菜单的例子,请自行完善,开发.下面请认真学习一下laravel的RBAC设计 1.建表(用户表.角色表.权限表. ...

  2. VS安装

    1. 只更改工作负载和单个组件 工作负载:我只勾选3个需要的 单个组件:  勾选  .NET 下Framework   别的不用改 2.点击安装,安装完成重启

  3. hdu 1533 Going Home (KM)

    Going HomeTime Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. nyoj 114-某种序列 (python EOFError, List, append)

    114-某种序列 内存限制:64MB 时间限制:3000ms 特判: No 通过数:6 提交数:13 难度:4 题目描述: 数列A满足An = An-1 + An-2 + An-3, n >= ...

  5. python_09

    今日内容: scrapy各组件 Components: 1.引擎(EGINE) 引擎负责控制系统所有组件之间的数据流,并在某些动作发生时触发事件.有关详细信息,请参见上面的数据流部分. 2.调度器(S ...

  6. Java包package之间调用问题-cmd运行窗口编译运行

    问题:在使用了java包机制(package)后,编译出现错误:找不到或无法加载主类 xxx 的错误提示信息(各种编译不通过) 先给演示结果: 编译:javac -d classes src/a/He ...

  7. php 打印数组格式化显示

    输出前添加 <pre>,便可以自动格式化换行显示. print_r("<pre>"); 比如打印数组 : print_r($arr); 输出: Array ...

  8. es6 every的使用

    let arr2 =[1,3,5,7,9,10]; //arr2.every() 数组里面所有的元素都有符合条件,才返回true var b =arr2.every(function (val,ind ...

  9. CSS中如果实现元素浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  10. Spring security (一)架构框架-Component、Service、Filter分析

    “致"高级"工程师(BUG工程师) 一颗折腾的心