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

我想将插入或删除操作应用于内容可编辑元素。例如：在给定位置插入/删除内容到contenteditable元素

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的位置，我会照顾的。

来源

2013-08-22 Arnaud Rinquin

所以该位置必须是相对于div的内容的一些HTML序列化？这将是不切实际的。 –

你说得对。你会建议什么样的定位解决方案？ –

我写此功能为您提供：

/** 
* @author Georgi Naumov 
* [email protected] 
* 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/

来源

2013-08-22 11:09:28

正如我的问题所述，我想避免完整的内容替换。 –

我已经做了许多研究。答案是：以非破坏性的方式实现这一点非常困难。

但是，James Padolsey在这件事上写了two excellent articles，第二个带来了an answer。并让大家使用a lib。

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

来源

2013-08-23 12:45:54

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

回答

相关问题