时间戳

首页 > 解决方案 > 将带有所选标签的节点插入带有自动关闭标签的内容可编辑 div 拆分范围

jquery - 将带有所选标签的节点插入带有自动关闭标签的内容可编辑 div 拆分范围

问题描述

我有一个命令调色板，其中包含几个用于内容可编辑 div 的格式化选项。例如，如果用户在将插入符号光标移动到不同的标签内容后按下按钮，我希望此标签内容拆分为两个节点，即在拆分节点之间插入 h2 标签之前自动关闭。

在某处我读到 Range 对象允许自动完成，但是当我尝试使用命令 insertNode 时，它​​只是将新标签作为所选锚节点的子标签。

        selection = document.getSelection();
        fields = selection;
        range = new Range();
        range.setStart(fields.anchorNode, fields.anchorOffset);
        range.setEnd(fields.focusNode, fields.focusOffset);           
        
        var newTag = $("<"+newTagName+">");
        newTag.addClass("inserted");
        
        range.insertNode(newTag[0]);
        newTag = $(textarea).find(".inserted")[0];
        $(newTag).removeAttr("class");
        
        range.selectNodeContents(newTag);            
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);

我必须手动分割范围吗？

提前致谢。

标签： jqueryautocompleterangeselectioncontenteditable

解决方案

推荐阅读