马黑PHP整站系统

 123456
78910111213
14151617181920
21222324252627
282930    

[复位日记]

最新评论

风云
悄然
飞飞
马黑
悄然

网站统计

·今日访问 : 203
·页面点击 : 224
·当前在线 : 12

2026年6月26日 星期五[阅读 37]

pencil code 着色版移动行的问题

解决行移动(支持单行、多行移动)的思路是:

将编辑框内的纯文本按行拆开,存储为三个数字,光标或选区上一行起的为一组、光标或选区所包含的行为一组、光标或选区下一行起为一组。三个数组在行移动过程中进行行元素交换,再将它们重组为编辑框里新的内容。

由于编辑器用 contenteditable="plaintext-only" 的 div 模拟,情况要比 textarea 复杂得多,主要是文本节点会随着部分输入增多,导致操作难度大增。这样,首先需要解决光标在纯文本中的位置,避免拿到的只是节点中的位置,并处理好节点位置和全局位置的关系;其次,在做行移动(以及选中行)前重置编辑框文本,确保仅保留一个文本节点;最后还有一个问题,就是光标位于行首、没有选中文本的状态,此时三个数组的分割很微妙,得做精准处理。

几经努力,着色版 pencil code 的行移动功能已完美上线。

2026': 前一则  下一则    

发表评论:

       

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com