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

时间:2016-03-18 20:29:56

标签: jquery contenteditable

找到这个功能:

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/

2 个答案:

答案 0 :(得分:0)

编辑:当您点击满意的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中找到正确的位置..

答案 1 :(得分:0)

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

像这样更改您的代码。

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