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有效性和选择/ carret的位置，我会照顾它。

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

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

然而，James Padolsey就此事写了two excellent articles，第二个是an answer。并为每个人使用a lib。

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

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

2 个答案: