Javascript - élément divisible contentable et les parents dans la moitié

Question

Je travaille sur un éditeur de micro wysiwyg. Je dois pouvoir faire ce qui suit:

permet de dire que le contenu de l'éditeur ressemble à ceci:

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

Si je mets le curseur sur l'espace and more et cliquez sur un bouton, je veux la HTML à partager comme ceci:

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

** CURSOR IS HERE NOW ** 

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

Comment est-ce que je ferais cela? Je peux déjà obtenir le nœud d'ancrage de l'élément cliqué et avoir une méthode pour obtenir le parent racine, mais aucune idée de comment approcher la séparation des éléments comme indiqué ci-dessus.

Answer 1

Vous pouvez simplement ajouter un élément p à la position du curseur, puis le retirer immédiatement. L'automatisation du contenu éditable prendra en charge les éventuelles balises de mise en forme découpées (ou qui ne le seront jamais), et le code HTML produit sera valide. Comme si:

var but = document.getElementById('splitBut'); 
 
    but.addEventListener('click', function() { 
 
    \t var temp; 
 
    \t 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>

A live demo at jsFiddle.

Notez que ce code ne fonctionne dans aucune version d'Internet Explorer (fonctionne dans Edge, cependant). En outre, le code HTML produit peut varier en fonction du navigateur utilisé.

---

Modifier

Chrome semble avoir des problèmes avec l'insertion HTML. L'élément inséré doit être vide. Après avoir supprimé l'élément, Chrome ajoute un élément br et rend le contenu incorrectement (un candidat à ajouter au Inconsistencies list de document.execCommand?). Malheureusement, je ne pouvais pas résoudre ce problème, et la réponse n'est utile que lorsqu'elle est exécutée dans FireFox ou Edge.