| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
[复位日记]
网站统计
·今日访问 : 180
·页面点击 : 192
·当前在线 : 6
2026年6月26日 星期五[阅读 36]
pencil code 着色版移动行的问题
解决行移动(支持单行、多行移动)的思路是:
将编辑框内的纯文本按行拆开,存储为三个数字,光标或选区上一行起的为一组、光标或选区所包含的行为一组、光标或选区下一行起为一组。三个数组在行移动过程中进行行元素交换,再将它们重组为编辑框里新的内容。
由于编辑器用 contenteditable="plaintext-only" 的 div 模拟,情况要比 textarea 复杂得多,主要是文本节点会随着部分输入增多,导致操作难度大增。这样,首先需要解决光标在纯文本中的位置,避免拿到的只是节点中的位置,并处理好节点位置和全局位置的关系;其次,在做行移动(以及选中行)前重置编辑框文本,确保仅保留一个文本节点;最后还有一个问题,就是光标位于行首、没有选中文本的状态,此时三个数组的分割很微妙,得做精准处理。
几经努力,着色版 pencil code 的行移动功能已完美上线。
2026': 前一则 下一则
发表评论:

