Simditor修改缩进为首行缩进

Simditor中默认的文本缩进行为是使用margin-left样式来处理的,所以如果文本太长折行后也会被一起向后缩进。这样对于显示中文文档确实不太好,于是修改了一些Simditor代码来实现首行缩进功能。

具体步骤如下:

  • 首先修改一些html标签,使其允许使用text-indent样式,代码在Formatter的_init方法里 - p: ['margin-left', 'text-align'], - h1: ['margin-left', 'text-align'], - h2: ['margin-left', 'text-align'], - h3: ['margin-left', 'text-align'], - h4: ['margin-left', 'text-align'] + p: ['margin-left', 'text-align', 'text-indent'], + h1: ['margin-left', 'text-align', 'text-indent'], + h2: ['margin-left', 'text-align', 'text-indent'], + h3: ['margin-left', 'text-align', 'text-indent'], + h4: ['margin-left', 'text-align', 'text-indent']
  • 修改 Indentation 的 indentBlock 方法,将其中使用的 margin-left 换成 text-indent - marginLeft = parseInt($blockEl.css('margin-left')) || 0; - marginLeft = (Math.round(marginLeft / this.opts.indentWidth) + 1) * this.opts.indentWidth; - $blockEl.css('margin-left', marginLeft); + $blockEl.css('text-indent', '32px');
  • 修改 Indentation 的 outdentBlock 方法,将其中使用的 margin-left 换成 text-indent - marginLeft = parseInt($blockEl.css('margin-left')) || 0; - marginLeft = Math.max(Math.round(marginLeft / this.opts.indentWidth) - 1, 0) * this.opts.indentWidth; - $blockEl.css('margin-left', marginLeft === 0 ? '' : marginLeft); + $blockEl.css('text-indent', '0px');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Windows 使用 pocketsphinx 做中文语音识别

    kongxx
  • Singularity入门之通过recipe文件创建镜像

    Singularity中也提供了类似Docker中通过Dockerfile来创建镜像的功能,我们可以把创建镜像的内容写到Singularity文件中,然后使用S...

    kongxx
  • Python2.x设置命令执行的超时时间

    kongxx
  • 如何解决mysqli_query() expects at least 2 parameters, 1 given in...line ?

    $userName = addslashes($_POST['userName']);

    用户6860623
  • Python3中的f-Strings增强版字符串格式化方法

    在Python3.6提供f-Strings新的字符串格式化语法。不仅更加可读、简洁,相比其他方式也不易造成错误,而且还更快。 看完本文你将学习到如何以及为什么...

    砸漏
  • 【MySQL入门】之MySQL数据库的锁机制(二)

    上篇文章主要聊了全局锁和表锁,并详细分析MDL锁的作用以及可能带来的问题。今天我们主要来聊一聊Innodb存储引擎的行锁。MySQL的行锁是在引擎层由引擎自己实...

    MySQL数据库技术栈
  • MongoDB 多文档事务实践篇—教你如何在 Node.js 中应用

    MongoDB 在单文档操作中具有原子性,在多文档操作中就不再具有此特性,通常需要借助事务来实现 ACID 特性。

    五月君
  • 处理器高危漏洞无人幸免?树莓派:我们不受影响

    机器之心
  • 未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。

    1. 打开文件project.config.json,找到miniprogramRoot 如下图:

    honey缘木鱼
  • Joy:一款用于捕获和分析网络内部流量数据的工具

    今天给大家介绍的是一款名叫Joy的工具,该工具能够捕捉并分析网络流数据以及系统内部流数据,研究人员可以利用这些数据以及分析结果来进行网络研究、取证以及安全监控等...

    FB客服

扫码关注云+社区

领取腾讯云代金券