[2026-08-28] [修复] [编辑器光标跳转] - 切换编辑器模式时光标自动定位至内容末尾

IsaacZ

1、问题缘起

论坛发帖编辑器在切换编辑模式时存在光标位置异常的问题。从纯文本模式切换到所见即所得（WYSIWYG）模式后，光标会自动跳转到内容开头，而切换到纯文本模式时光标位置正常（停留在内容末尾）。

具体现象：

操作	预期行为	实际行为
纯文本模式 → 可视化模式	光标停留在内容末尾	❌ 光标跳转到开头
可视化模式 → 纯文本模式	光标停留在内容末尾	✅ 正常

根本原因：switchEditor() 函数在切换编辑器模式后，虽然调用了 editwin.focus() 让编辑器获得焦点，但没有显式地将光标定位到内容的末尾。可视化模式（iframe）和纯文本模式（textarea）的光标控制机制不同，导致两者表现不一致。纯文本模式通过 setCaretAtEnd() 函数正常保留了光标位置，而可视化模式则没有对应的处理逻辑。

2、解决方案

（1）简要技术分析：

使用 DOM Range API 在可视化模式下获取编辑器内容的最后一个节点，将光标位置设置到该节点的末尾；纯文本模式则通过设置 selectionStart 和 selectionEnd 将光标定位到文本末尾。

（2）修改文件列表：

操作	文件路径
修改	/static/js/editor.js

（3）关键代码段：

修改位置：switchEditor 函数中，在 setEditorStyle(); 之后、editwin.focus(); 之前插入光标恢复逻辑。

1.     // ----- 修复：切换模式后光标位置恢复 -----
   
2.     if (wysiwyg) {
   
3.         // 可视化模式：光标移到内容末尾
   
4.         var range = editdoc.createRange();
   
5.         var sel = editwin.getSelection();
   
6.         if (editdoc.body.childNodes.length > 0) {
   
7.             var lastNode = editdoc.body.lastChild;
   
8.             range.setStartAfter(lastNode);
   
9.             range.setEndAfter(lastNode);
   
10.         } else {
    
11.             range.setStart(editdoc.body, 0);
    
12.             range.setEnd(editdoc.body, 0);
    
13.         }
    
14.         sel.removeAllRanges();
    
15.         sel.addRange(range);
    
16.     } else {
    
17.         // 纯文本模式：光标移到内容末尾
    
18.         var len = editdoc.value.length;
    
19.         editdoc.selectionStart = len;
    
20.         editdoc.selectionEnd = len;
    
21.     }
    
22.     // -----------------------------------------
    

复制代码

3、最终实现效果

测试场景	修复前	修复后
纯文本→可视化（有内容）	光标跳转到开头	✅ 光标停留在末尾
纯文本→可视化（空内容）	光标在开头	✅ 光标在开头（正常）
可视化→纯文本	光标在末尾	✅ 光标在末尾（不变）
多次切换	光标位置混乱	✅ 始终保持在末尾

两种编辑器模式下光标行为保持一致，均停留在内容末尾。

4、重要技术沉淀

需更新到固化摘要：

1. 二十五、编辑器切换模式光标定位问题（2026-08-28）
   
2. 
   
3. 问题：从纯文本模式切换到可视化模式后，光标跳转到内容开头
   
4. 原因：switchEditor() 未对可视化模式设置光标位置，仅调用了 focus()
   
5. 解决：使用 DOM Range API 将光标定位到内容末尾
   
6. 涉及文件：static/js/editor.js
   
7. 技术要点：iframe 编辑器需通过 Range + Selection API 设置光标
   

复制代码

踩坑点：

踩坑	正确做法
纯文本和可视化模式使用相同的光标控制方法	两种模式机制不同，需分别处理
仅调用 editwin.focus() 恢复光标	还需要设置 Range 和 Selection
内容为空时直接定位末尾	空内容时需判断 childNodes.length，否则会报错

5、进一步优化可能性

• 统一光标恢复逻辑：将光标定位封装为独立函数，供切换模式和加载内容时复用
• 保存光标位置：切换模式前记录当前光标位置，切换后恢复到相同位置（而非总是跳转到末尾）
• 其他编辑器操作后的光标恢复：如插入图片、引用等操作后光标可能偏移，可参考此方案统一处理