如何在可编辑div中切换斜体标签？简易HTML编辑器实现疑问

一、当前实现的正确性分析 #

你的实现核心逻辑是成立的：通过选区操作定位当前单词，再用<i>标签包裹内容，但存在几个可优化的细节：

• sel.modify的兼容性：主流现代浏览器都支持，但旧版IE等环境无法兼容，如果只面向现代浏览器可以忽略这点。
• 未处理嵌套冗余：重复点击按钮会让已斜体的内容被多层<i>嵌套，生成<i><i>lorem</i></i>这类无效结构。
• 光标体验：操作后光标停在选区末尾，基本没问题，但可以更精准地保持编辑连贯性。

二、实现斜体切换功能 #

要实现"点击添加斜体、再次点击移除斜体"的切换效果，核心是先判断当前选中单词是否已被<i>包裹，再执行对应操作。以下是优化后的完整代码：

HTML（保持不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btnitalic'>ITALIC</button>
<br><br>
<div class='ed' id='ed' contenteditable>
lorem ipsum
dolor sit
</div>

CSS（保持不变） #

.ed{display:inline-block; width:100%; min-height:99px; background:orange;}

JavaScript（优化后） #

var ed = $('#ed');
$('.btnitalic').on('click', function(){
    var sel = window.getSelection();
    // 选中当前光标所在的单词
    sel.modify('move', 'backward', 'word');
    sel.modify('extend', 'right', 'word');
    var rn = sel.getRangeAt(0);
    var currentNode = rn.commonAncestorContainer;
    
    // 向上遍历父节点，检查是否已处于<i>标签内
    var isItalic = false;
    var targetI = null;
    while(currentNode && currentNode !== ed[0]){
        if(currentNode.tagName === 'I'){
            isItalic = true;
            targetI = currentNode;
            break;
        }
        currentNode = currentNode.parentNode;
    }

    if(isItalic){
        // 移除斜体：将<i>的子节点移到父节点，再删除<i>标签
        var parent = targetI.parentNode;
        while(targetI.firstChild){
            parent.insertBefore(targetI.firstChild, targetI);
        }
        parent.removeChild(targetI);
    } else {
        // 添加斜体：用<i>包裹选中的内容
        var tx = rn.extractContents();
        var i = document.createElement('i');
        i.appendChild(tx);
        rn.insertNode(i);
    }

    // 恢复光标位置到操作后的内容末尾
    sel.removeAllRanges();
    var newRange = document.createRange();
    newRange.setStartAfter(isItalic ? parent : i);
    newRange.collapse(true);
    sel.addRange(newRange);

    console.clear();
    console.log(ed.html());
});

关键逻辑说明 #

1. 状态判断：通过遍历选中内容的父节点链，确认是否存在<i>标签，以此判断当前单词是否为斜体。
2. 移除斜体操作：把<i>标签的子节点转移到它的父节点中，再删除空的<i>标签，避免结构冗余。
3. 光标恢复：操作完成后将光标定位到内容末尾，保证编辑流程的连贯性。

内容的提问来源于stack exchange，提问作者provance