JavaScript

HTML5 contenteditable pre blockquote 换行出现多个pre的问题

最近开发富文本编辑器 在code pre处遇到了这个问题

发现在pre标签换行的时候  直接新创建了一个pre标签

并没有直接在pre标签里 给上换行符

于是只能用js 监听keydown = 13 回车键 return false

用js 在光标处写入 \r\n.

结果是可以正常换行了  新问题又来了

谷歌浏览器 换行 需要按两次回车 才会换下一行

火狐浏览器 换行 发现光标不会自动到下一行  而是在第一行尾部

于是找了 好多文章 均没提及此事。在我想就此比罢了的时候 尝试了一下 把\r\n 换成了 \n

结果 火狐浏览器的光标正常了  谷歌浏览器的问题依然存在。

然后接着把 \n 换成了 \n\r 然后一试 居然正常了。。OMG


var range = this.lastEditRange; //光标对象 selection.getRangeAt(0)
	var textNode = range.startContainer;
	var rangeStartOffset = range.startOffset;
	
    // 文本节点在光标位置处插入新文本
    textNode.insertData(rangeStartOffset, text); //text = \n\r
    range.setStart(textNode, rangeStartOffset + text.length);
    // 光标开始和光标结束重叠
    range.collapse(false);

    // 清除选定对象的所有光标对象
    this.selection.removeAllRanges();
    // 插入新的光标对象
    this.selection.addRange(range)
    //this.setEditRange_();


0 条评论

发表评论

你需要登录后才可进行发表