codemirror 光标定位_CodeMirror 中固定滚动位置
CodeMirror 是最流行的代码编辑器之一,包括写作软件 WonderPen 在内的很多工具都使用它开发。
与印象笔记等笔记软件不同,WonderPen 的定位是一款写作软件。写作软件与笔记软件之间有很多区别,最大的不同就是前者更专注于提升写作时的体验,而后者则更专注于数据的存储与连接。写作软件中有一个常见的特性,「打字机模式」。
打字机模式
在 Word 等大多数编辑软件中,如果你输入了很多内容,超过一屏之后,光标通常会位于屏幕最下方,这时除非你滚动一下文档,否则光标会一直处于屏幕最下的位置,你的视线也只能一直盯在这个位置,这对需要长时间输入的用户来说并不友好。所谓打字机模式,其实就是像传统的打字机一样,在用户输入时将光标在屏幕上的 y 坐标固定(比如固定在屏幕中间),这样便能保持用户视线高度固定。在技术上来说,就是固定文档的滚动位置。
在 CodeMirror 中,实现这样的功能很简单,下面是一个例子。
首先,我们生成一个 CodeMirror 编辑器实例
const cm = CodeMirror(document.body, {
lineNumbers: true
});
cm.setSize("100%", "100%");
我们并不需要让滚动条一直固定,因为有时候用户需要手动滚动文档,查看上方或下方的内容,因此我们只需要监听它的 change 事件,并在每次事件触发时更新滚动位置。
cm.on("changes", (cm, changes) => updateByTypewriterMode(cm, changes));
这儿的 updateByTypewriterMode() 函数是我们的一个自定义函数,CodeMirror 会传入两个参数进去,分别是当前 CodeMirror 编辑器的实例以及本次 change 事件对应的修改内容。
updateByTypewriterMode() 函数的内容如下:
function updateByTypewriterMode(cm, changes) {
if (cm.getSelection().length !== 0) {
return;
}
const scroll_origins = ["+input", "+delete", "*compose", "paste"];
for (let i = 0, len = changes.length; i < len; i++) {
let each = changes[i];
let origin = each.origin;
if (scroll_origins.includes(origin)) {
cm.execCommand("wpScrollSelectionToCenter");
return;
}
}
}
在发生指定类型的修改时,执行 CodeMirror 的命令 wpScrollSelectionToCenter。这个命令是一个自定义命令,定义如下:
CodeMirror.commands.wpScrollSelectionToCenter = function(cm) {
if (cm.getOption("disableInput")) {
return CodeMirror.Pass;
}
// 获取当前光标所在位置
let top = cm.cursorCoords(true, "local").top;
// 获取当前编辑器高度
let editor_height = cm.getWrapperElement().offsetHeight;
// 获取当前行高
let lh = cm.defaultTextHeight();
let scroll_y = Math.round(top - editor_height / 2 + lh / 2);
cm.scrollTo(null, scroll_y);
};
同时,我们可以再用 CSS 给编辑器下方添加一定高度的空白,保证需要的时候滚动条有足够的空间。
.CodeMirror-lines {
padding-bottom: 50%;
}
这样,打字机模式就基本完成了,用户输入内容时,如果文档长度已经超过容器高度的一半,则光标所在行会自动滚动到屏幕中间。
示例
你可以点击这儿,查看在线的完整示例。此例中,你可以在 CodeMirror 编辑器中随意输入内容,可以看到光标始终会保持在容器的上 1/2 位置。
codemirror 光标定位_CodeMirror 中固定滚动位置相关推荐
- codemirror 光标定位_CodeMirror
下载后,解压开到的文件夹中,lib下是放的是核心库和核心css,模式下放的是各种支持语言的语法定义,主题目录下是支持的主题样式.一般在开发中,添加lib下的引用和模式下的引用就够了. 使用示例 首先, ...
- 创建一个IntelliJ Idea文件模板,将光标放在文件中的特定位置
问题: 创建一个IntelliJ文件模板,将光标放在文件中的特定点.实时模板(live template)有$ END $,可在插入实时模板后将光标放在某个位置.那么文件模板呢(file and co ...
- android黑科技系列——微信定位聊天记录中照片的位置信息插件开发详解
一.前言 最近关于微信中,朋友之间发送原图就可能暴露你的位置信息,其实这个问题不在于微信,微信是为了更好的体验效果,才有发送原图功能,而对于拍照,发送普通图片微信后台都会过滤图片的exif信息,这样就 ...
- codemirror 光标定位_在线代码编辑器 CODEMIRROR 配置说明
转自:http://www.hyjiacan.com/codemirror-config/ CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net ...
- codemirror 光标定位_使用Codemirror打造Markdown编辑器
前几天突然想给自己的在线编译器加一个Markdown编辑功能,于是花了两三天敲敲打打初步实现了这个功能. 一个Markdown编辑器需要有如下常用功能:粗体 斜体 中划线 标题 链接 图片 引用 代码 ...
- 浏览器滚动的详细解释 Vue 固定滚动位置的实现
滚动形成的条件 父子两个元素 子元素的高 > 父元素的高, 并且父元素 overflow:scroll; ok, 那么现在考虑这种情况: 假设: 有父子两个元素, 子元素的高度 > 父元素 ...
- codemirror 光标定位_Code Mirror Api 说明
在JS中进行CodeMirror的一些操作绝对会使用到的api API列表: this.CodeMirrorEditor.setValue("Hello Kitty"):设置编辑器 ...
- linux-命令模式-光标定位-编辑中20.22
>打开文件 >显示内容 上下左右 行首 0 行尾 $ 第一行 gg 最后一行 G 第n行 nG 例如,第3行就录入 3G 搜索词 /string 例如 要搜索2019 /2019 搜到的词 ...
- JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
最新文章
- nginx 负载均衡配置_LINUX系统nginx负载均衡配置
- 【java的多态性】
- wifi网络结构(下)
- pandas里面已经是sort_values()啦
- Python 网络爬虫笔记4 -- 信息标记与提取
- 请详细描述一下线程从创建到死亡的几种状态都有哪些?
- 【Java单元测试】如何进行单元测试、异常测试、参数化测试、超时测试、测试多线程
- 【PAT甲级 环最短距离】1046 Shortest Distance (20 分) Java、C++
- LNMP1.3 一键配置环境,简单方便
- 计算机应用基础 a卷,计算机应用基础笔试A卷.doc
- attention机制中的注意力图怎么画_注意力机制 | 图卷积多跳注意力机制 | Direct multihop Attention based GNN...
- html5+php调用android手机图片,HTML5拍照上传图片Phonegap封装HTML5调用Android相机拍照上传到PHP端...
- Proliant server setup redhat7.1(DL560)
- 数据结构1——堆栈和队列
- 大学计算机应用教程马秀麟,大学计算机基础电子教案.docx
- 【实验】【视图】使用v$bgprocess视图获得所有后台进程信息
- uniapp路线规划
- linux中 halt shutdown
- 模拟电子技术基础-什么是放大?
- 苹果自带计算机误删,苹果手机日历误删怎样恢复?恢复的小技巧
热门文章
- uniapp使用 Ucharts2.0绘制图形
- java me xizai_GitHub - seven332/XiaZai: A simple Android download library
- 操作mysql_MySQL:MySQL的基本操作
- mysql怎么查看自己建的表_mysql怎么查看已建的表
- JSP开发之JSP 表单处理(GET 方法POST 方法)
- U盘安装ubuntu22.04 Linux系统分区
- 杨永信网戒中心关停 法律上还需有个说法
- Pytorch的RELU函数
- 你很少知道的谷歌常用高级搜索技巧语法,学会了成为最牛搜索者
- ArcEngine开发:创建shp数据文件,并存入Geometry类型的要素到shp数据文件