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

Question

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

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 有效性和选择/插入位置，我会处理的。

Answer 1

我为你写了这个函数：

/**
 * @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/

Answer 2

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

然而，詹姆斯帕多尔西写了两篇关于这个问题的优秀文章，第二篇带来了答案。并制作了一个库供大家使用。

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