我怎么能(使用
jquery或其他)在我的contenteditable div的光标/插入位置插入html：
- <div contenteditable="true">Hello world</div>
例如,如果光标/插入符号位于“hello”和“world”之间,则用户单击按钮,例如“插入图像”,然后使用javascript,类似于< img src = etc etc>等.将插入“你好”和“世界”之间.我希望我已经明确表示= S.
非常感谢示例代码,非常感谢！
解决方法
以下函数将在所有主流桌面浏览器的光标位置插入DOM节点(元素或文本节点)：
- function insertNodeAtCursor(node) {
- var sel,range,html;
- if (window.getSelection) {
- sel = window.getSelection();
- if (sel.getRangeAt && sel.rangeCount) {
- sel.getRangeAt(0).insertNode(node);
- }
- } else if (document.selection && document.selection.createRange) {
- range = document.selection.createRange();
- html = (node.nodeType == 3) ? node.data : node.outerHTML;
- range.pasteHTML(html);
- }
- }
如果您想要插入HTML字符串：
- function insertHtmlAtCursor(html) {
- var sel,node;
- if (window.getSelection) {
- sel = window.getSelection();
- if (sel.getRangeAt && sel.rangeCount) {
- range = window.getSelection().getRangeAt(0);
- node = range.createContextualFragment(html);
- range.insertNode(node);
- }
- } else if (document.selection && document.selection.createRange) {
- document.selection.createRange().pasteHTML(html);
- }
- }
我从我对类似问题的回答中对此进行了调整：How to find cursor position in a contenteditable DIV?
