CodeMirror插件,鼠标光标与代码定位错误BUG处理

大家好,我在开发Z平台时随到一个BUG,在Z平台表单类型中,“源码输入框”类型的字段是使用CodeMirror插件开发完成的,在使用CodeMirror插件时,发现一个BUG,当然这个BUG有可能是我集成其它CSS样式冲突导致的。无论BUG是如何产生的,我想在这里分享一下我是怎样处理这个BUG,如果您也遇到相近的问题,可以参数我的做法来处理。

 BUG介绍

CodeMirror版本:5.43.0 

在表单中,有一个用来存储SQL语句的字段,这个字段我是引用了CodeMirror插件的,在通过“CTRL + A” 全选状态时,大家可以看到选中的内容框并没有将所有看到的内容都包括在内,当然,这个时候你如果用鼠标选择的话,选中的内容和你想像一定是有偏差的。有一定的错位。经过处理后,大家可以看到如下BUG处理后的结果,

BUG处理前

    

BUG处理后 

 

BUG处理过程

处理过程分析

首先介绍一下CodeMirror插件页面显示结构,在引用CodeMirror插件后,CodeMirror插件是将原<textarea>控件的上层,覆盖一层<div>,将<textarea>控件中的信息,显示到覆盖层<div>中,并通过解析关键词来完成源文本高度与格式的显示处理的。

知道了这个插件显示结构后,我查看了页面运行时显示的代码,发现一个问题,原<textarea>控件的CSS样式被Bootstrap框架CSS样式给设置一个默认的font-size:13px属性,也就是字体大小默认设置为13px,但CodeMirror插件覆盖层<div>中,默认字体大小为14px,所以才导致的光标与代码有错位这个BUG的产生。知道到了这个BUG产生的原因,我是这样来处理。

修改方案一:删除Bootstrap框架CSS默认样式中对<textarea>控件font-size属性的定义。

                    因为Bootstrap框架是我开发Z平台的主框架,删除textarea默认样式会产生连锁问题,此方案作废。

修改方案二:修改CodeMirror插件覆盖层<div>默认字体大小为13px

                    我选择了方案二,因为修改后不会影响其它功能。

 具体修改过程

打到/codemirror-5.43.0/lib/codemirror.css文件,在.CodeMirror-sizer样式中增加属性font-size:13px;

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵戬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值