Editable Div插入位置

我有一个可编辑的div，我正在使用一个按钮将图像插入div。现在，我只是在做document.getElementById（'elementid'）。innerHTML。 + =;以便将图像添加到div的末尾。我想输入插入的地方。我会如何去做这件事？Editable Div插入位置

感谢

来源

2010-12-02 intl

要在插入符号中插入元素并不难。下面的函数插入一个节点在光标（或选择的结束时，如果被选择的内容）的所有主要浏览器：

function insertNodeAfterSelection(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
}

来源

2010-12-03 10:39:09

这是否帮助：http://jsfiddle.net/8akDr/

来源

2010-12-02 20:46:18

我明白你只是更换插入的字符/字符集，但我将如何去将字符插入插入位置。它必须是模拟键盘输入还是其他方式？ – intl 2010-12-02 21:18:25

哇......我很惭愧地说，我以为你的意思是一个脱口而来，就像文字中的脱字符......我为我的误解道歉：（ – 2010-12-02 21:32:05

我恨听起来负，但是这太难了这是荒谬的。你必须处理IE和其他，并且实现是非常不同的。但是，如果你点击一个按钮来插入图像，你会失去焦点和插入位置，所以你需要记住一些onblur书签功能（同样，IE不同）。如果您的editablecontent位于iframe并保持自己的焦点，那么焦点就不是问题了。（注意：在这里不要停止使用IE，我实际上更喜欢将它们实现为W3C标准drek。）

您可以查看一些开源文本编辑器的线索和提示。但是你会发现大量的代码来处理这些简单的任务。

来源

2010-12-02 21:08:04 mwilcox

）你提到了一些困难，但他们不是我的Rangy图书馆（http://code.google.com/p/rangy）可以帮助大多数人：它提供了一个单一的API和保存和恢复选择的方法，我很大程度上不同意你关于IE的选择/ TextRange比DOM标准更好：除了移动边界以包含单词并移动到文档中的相邻文本外，`Range`在大多数方面都大大优于`TextRange`。选择对象没有标准（WHATWG正在工作）但IE浏览器的选择对其他浏览器没有任何影响 – 2010-12-03 10:26:37

Editable Div插入位置

回答

相关问题