在 contenteditable 中插入 div答案

【问题标题】：Insert div in contenteditable在 contenteditable 中插入 div
【发布时间】：2015-06-15 08:26:26
【问题描述】：

我正在尝试将带有文本的div 插入contenteditable 并在添加div 后选择div 标签之间的文本：

div.innerHTML +='<div id="id">selecttext</div>'

但这不会选择选择文本

<html>
    <head></head>
    <body>
        <div id="contenteditable" contenteditable></div>
        <script>
            var contenteditable = document.getElementById("contenteditable");

            contenteditable.onkeyup = function (e) {
                contenteditable.innerHTML += '<div>Start here</div>';
            }
        </script>
    </body>
</html>

【问题讨论】：

你能展示一些代码吗，到目前为止你已经尝试过什么？
你什么时候插入 div.innerHTML +='
selecttext
'？那个 div 是什么？
我想选择“从这里开始”这个词或将插入符号放在 ned 添加的 div 之间
你能说，什么目标？为什么onkeyup？
按下键...我只想在 div 之间插入单词并选择它，就像用鼠标选择单词时一样...并且只选择单词，否则所有添加的 div 将被删除你改变 div 之间的单词

标签： javascript contenteditable

【解决方案1】：

您的问题分为三个部分：

将带有文本的div 插入contenteditable：

contenteditable.innerHTML += '<div id="startHere">Start Here</div>';

从这里开始div:

function findStartHereDiv(contenteditable) {
    var childNodes = contenteditable.childNodes;
    for(var i = 0; i < childNodes.length; i++) {
        if(childNodes[i].id == 'startHere') {
            return childNodes[i];
            break;
        }
    }
   return null; 
}

选择startHere div的文本：

function selectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

这是你需要的吗？

DEMO

【讨论】：