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 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

实现属于自己的TensorFlow(一) - 计算图与前向传播

前言 前段时间因为课题需要使用了一段时间TensorFlow,感觉这种框架很有意思,除了可以搭建复杂的神经网络,也可以优化其他自己需要的计算模型,所以一直想自...

45770
来自专栏拂晓风起

Stage3d 由浅到深理解AGAL的管线vertex shader和fragment shader || 简易教程 学习心得 AGAL 非常非常好的入门文章

1、渲染的过程,3d管线的概念。有vertex shader,有fragment shader,这连个是管线里边提供接口出来,可供自定义编程的

19010
来自专栏青玉伏案

算法与数据结构(五) 普利姆与克鲁斯卡尔的最小生成树(Swift版)

上篇博客我们聊了图的物理存储结构邻接矩阵和邻接链表,然后在此基础上给出了图的深度优先搜索和广度优先搜索。本篇博客就在上一篇博客的基础上进行延伸,也是关于图的。今...

31170
来自专栏生信宝典

R语言学习 - 线图绘制

线图 线图是反映趋势变化的一种方式,其输入数据一般也是一个矩阵。 单线图 假设有这么一个矩阵,第一列为转录起始位点及其上下游5 kb的区域,第二列为H3K27a...

21460
来自专栏深度学习之tensorflow实战篇

R语言函数的含义与用法,实现过程解读

R的源起 R是S语言的一种实现。S语言是由 AT&T贝尔实验室开发的一种用来进行数据探索、统计分析、作图的解释型语言。最初S语言的实现版本主要是S-PLUS。S...

483120
来自专栏linux、Python学习

数据可视化:Matplotlib的坐标轴管理

有兴趣的可以跟踪pyplot模块的figure函数,可以完整看见Figure的创建过程,由FigureManager创建与管理的。

52600
来自专栏图像识别与深度学习

2018-06-30 详解 MNIST 数据集

15220
来自专栏图形学与OpenGL

机械版CG 实验4 裁剪

了解二维图形裁剪的原理(点的裁剪、直线的裁剪、多边形的裁剪),利用VC+OpenGL实现直线的裁剪算法。

18710
来自专栏漫漫深度学习路

tensorflow自定义op:梯度

tensorflow自定义op,梯度 tensorflow 是 自动微分的,但是如果你不给它定义微分方程的话,它啥也干不了 在使用 tensorflow 的时...

79370
来自专栏GIS讲堂

说说地图中的聚类

虽然Openlayers4会有自带的聚类效果,但是有些时候是不能满足我们的业务场景的,本文结合一些业务场景,讲讲地图中的聚类展示。

13730

扫码关注云+社区

领取腾讯云代金券