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;

CodeMirror插件，鼠标光标与代码定位错误BUG处理相关推荐

Control Study - 键盘模拟鼠标(实现用键盘操作鼠标光标)(示例代码下载)
(一).功能实现用键盘模拟鼠标移动的功能,在游戏设计中常用到 *操作说明: 当运行程序后,放开鼠标,按键盘上的光标键移动,可以代替鼠标. (二).代码 1 using System; ...
vue父页面调用子页面及方法及传参，鼠标光标定位
项目场景: vue父页面调用子页面及方法问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了原因分析: 在我之前添加鼠标指针定位 ...
解决pycharm书写代码是鼠标光标变粗的问题
问题:pycharm书写代码是鼠标光标变粗光标变细的解决方法:键盘按insert键即可.若是笔记本可按 fn + insert.
html文本框代码高亮,CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程
CodeMirror 是一个用于编辑器文本框 TextArea 代码高亮 JavaScript 插件,为各种编程语言实现关键字.函数.变量等代码高亮显示,丰富的 API 和可扩展功能以及多个主题样式, ...
java createcustomcursor,CustomCursor插件：自定义你的鼠标光标
Custom Cursor for Chrome 在你们新标签页争奇斗艳的时候,有没有人考虑过鼠标光标的感受? 没有,一个都没有. 你们只在乎壁纸有没有逼格,图标好不好看,天气预报准不准,却没有一 ...
没用过这些 IDEA 插件？怪不得写代码头疼
学习使用一些插件,可以提高平常工作中的开发效率.对于我们开发人员很有帮助! 插件安装 IDEA里面,依次选择打开 File → Settings → Plugins,在Plugins里面可以搜索需要的 ...
codemirror 插件使用总结
最近工作中需要用到网页端代码编辑器.在此使用code-mirror插件作为提供者,以下总结一些遇到的问题及解决方案: 参考手册: vue-codemirror 地址: https://github.c ...
IDEA编码小技巧（鼠标光标等等）
IDEA小技巧鼠标光标小技巧: 1.ctrl+键盘左右移动 : 按单词单位左右移动(加shift增加选中) 2.Alt+键盘上下 : 上下切换方法 3.ctrl+'-'|'+'(ctrl加'-'或者 ...
鼠标光标一直在闪烁_便携有个性，功能强大，可配戴在手指上的键盘鼠标
中车永济电机有限公司.河南大学物理与电子学院的研究人员陶崇勃.侯卫周,在2019年<电气技术>增刊1中撰文(论文标题为"一款指尖压敏可配戴式键盘鼠标")指出,在信息科技 ...

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

BUG介绍

BUG处理前

BUG处理后

BUG处理过程

处理过程分析

具体修改过程

CodeMirror插件，鼠标光标与代码定位错误BUG处理相关推荐

最新文章

热门文章