将内容插入/删除到给定位置的contenteditable元素中

Insert / delete content into contenteditable element at given position

本文关键字：位置 定位 contenteditable 元素 插入 删除      更新时间：2023-09-26

我想对内容可编辑元素应用插入或删除操作。示例：

element = $('.content')
op = {insert: 'This works', pos:32}
applyOperation(element, op)

将转换：

<div class='content'><i>anything</i> something else <i>anything else</i></div>

进入：

<div class='content'><i>anything</i> something else This works<i>anything else</i></div>

限制：我希望避免全部内容替换。

注意：现在不要为HTML的有效性和选择/carret位置而烦恼，我会处理好的。

我为您编写以下函数：

/**
 * @author Georgi Naumov
 * gonaumov@gmail.com
 * http://georgi-naumov.blogspot.com/
 **/
function applyOperation(element, op) {
   if(typeof op['insert'] != 'undefined' && typeof op['pos'] != 'undefined') {
       var resultHtml = element.html().replace(new RegExp("((?:[^'s]|['s]+){" + op['pos'] + "})"), "$1" + op['insert']);
       element.html(resultHtml);
       return element;
   }
}

以下是工作jsfiddle：http://jsfiddle.net/zono/qY5yg/

我做了很多研究。答案是：以非破坏性的方式实现这一点相当困难。

然而，詹姆斯·帕多尔西写了两篇关于这个问题的优秀文章，第二篇文章给出了答案。并制作了一个供所有人使用的库。

该解决方案涉及到文本节点的拆分和合并（通过normalize()）。真是好东西。

相关文章：