1

我正在开发一个微型所见即所得的编辑器。我需要能够执行以下操作：

假设编辑器中的内容如下所示：

<p>This is 
    <strong>some content 
        <span>and more</span>
    </strong>
</p>

如果我将光标放在空格上and more并单击一个按钮，我希望 HTML 像这样拆分：

<p>This is 
    <strong>some content 
        <span>and</span>
    </strong>
</p> 

** CURSOR IS HERE NOW **

<p>
    <strong>
        <span> more</span>
    </strong>
</p>

我该怎么做呢？我已经可以获取单击元素的锚节点，并且有一种获取根父节点的方法，但不知道如何拆分元素，如上所示。

4

1 回答 1

0

您可以简单地将p元素添加到光标位置，然后立即将其删除。内容可编辑的自动化将处理可能的拆分格式（或任何一个）标签，并且生成的 HTML 将是有效的。像这样：

    var but = document.getElementById('splitBut');
    but.addEventListener('click', function () {
    	var temp;
    	document.execCommand('insertHTML', false, '<p id="temp"></p>');
        temp = document.getElementById('temp');
        temp.parentElement.removeChild(temp);
   });
<button id="splitBut">Split</button>
<div id="pad" contenteditable>
    <p>This is
        <strong>some content 
        <span>and more</span>
    </strong>
    </p>
</div>

jsFiddle 的现场演示。

请注意，此代码在任何版本的 Internet Explorer 中都不起作用（但在 Edge 中起作用）。此外，生成的 HTML 可能会有所不同，具体取决于使用的浏览器。

编辑

Chrome 似乎在 HTML 插入方面存在问题。插入的元素必须为空。删除元素后，Chrome 添加一个br元素，并错误地呈现 contenteditable（添加到Inconsistencies 列表的候选者document.execCommand？）。不幸的是，我无法解决这个问题，而且答案只有在 FireFox 或 Edge 中运行时才有用。

于 2016-09-16T18:51:09.450 回答