Question

找到这个功能：

function insertTextAtCursor(text) {
    var sel, range, html;
    sel = window.getSelection();
    range = sel.getRangeAt(0);
    range.deleteContents();
    var textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    sel.removeAllRanges();
    sel.addRange(range);
}

我有一个内容可编辑的div和一个设置按钮，用于将图像标记添加到div中。

但是，按照小提琴，按钮会将文本添加到自身而不是div。

任何帮助？

https://jsfiddle.net/e859j9an/

Answer 1

编辑：当您点击满意的div时，我找到了一种方法：

See this fiddle

我用这段代码更新了你的JS：

$(function() {
  /* Text editor */   
  $(".custom-text-editor").on('click', function(){
    insertTextAtCursor('this text');
  });   
});

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

当您点击按钮时，我不知道您是否可以在div.custom-text-editor中找到正确的位置..

Answer 2

这是因为当你点击另一个元素时，contenteditable div会失去它的焦点。

像这样更改您的代码。

$(".custom-text-editor").focus();
$(".insert-image").on('mousedown', function(e){
insertTextAtCursor("this is an image");
return false;
});

在光标点插入文本 - 当前插入单击的元素而不是文本字段

2 个答案: