Question

我正在编写代码，以便在contenteditable div中的文本末尾输入html文本。我在文本末尾插入html时遇到问题，因为当我在contenteditable div中插入html文本时，它将始终在开头插入html文本。

示例：

gmail.comgoogle.com

应该是：

 google.com gmail.com

我已经尝试过了：

var Text = $("#linkdialog-text").val();
$('#quickreply').focus().val(' ');
$('#quickreply').focus().val(Text);

它没有用，因为它不会将光标集中在文本的结尾，因为它只会在开头显示新文本。

<div id="quickreply" class="reply-message" hidefocus="false" aria-label="Message Body" g_editable="true" role="textbox" aria-hidden="true" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr;min-height: 135px;width: 840px; padding-left: 25px; font-size: 13px;" itacorner="6,7:1,1,0,0"><a href="http://google.co.uk">google.co.uk</a></div>

<input id="linkdialog-onweb-tab-input" class="LW-Ke-JD-LV-J7" aria-labelledby="linkdialog-onweb" type="url" style="width: 372px;">

$(document).on('click','#ok', function(e) {

if($('#linkdialog-web-button').is(':checked')) {
    var selected_text = window.getSelection ? 
    "" + window.getSelection() : document.selection.createRange().text;
    var linkURL = $("#linkdialog-onweb-tab-input").val();
    var Text = $("#linkdialog-text").val();

    $('#editlink_background').hide();
    $('#editlink_dialog').hide();

    if ($('#linkdialog-onweb-tab-input').val().indexOf('http://') == -1) {
        alert("here 1");
        //$('#quickreply').focus();

        if(selectedNode != null && selectedNode.nodeName === 'A'){
            selectedNode.href = "http://"+linkURL;
            selectedNode.innerText = Text;
        }
        else {
            newNode = document.createElement("a");
            newNode.href = "http://"+linkURL;
            newNode.innerText = Text
            //var data = $('#quickreply').val();
            $('#quickreply').focus().val(' ');

            //selectedRange.insertNode(newNode);
            document.execCommand('insertHTML', false, '<a href="http://'+linkURL+'">'+Text+'</a>');
        }
    }
    else {
        $('#quickreply').focus();

        if(selectedNode != null && selectedNode.nodeName === 'A'){
            selectedNode.href = linkURL;
            selectedNode.innerText = Text;
        }else{
            newNode = document.createElement("a");
            newNode.href = "http://"+linkURL;
            newNode.innerText = Text

           //selectedRange.insertNode(newNode);
            document.execCommand('insertHTML', false, '<a href="'+linkURL+'">'+Text+'</a>');
        }                
    }
}
});

我期望实现的是将文本gmail.com放在元素#linkdialog-onweb-tab-input中，然后单击按钮，我想在{旁边插入html文本<a href="http://gmail.com">gmail.com {1}}在内容可编辑的div中。

能给我一个例子，如何将google.com的html文本显示在contenteditable div中的gmail.com旁边？

谢谢。

Answer 1

我可能误解了这个问题，但是您只需要一个简单的串联即可。

$('#quickreply').text(textToBeInserted + $('#quickreply').text())

如何将光标聚焦在文本旁边ContentEditable的末尾？

1 个答案: