Introduction détaillée de l'éditeur de texte enrichi H5

Utilisez l'attribut global H5 contenteditable pour rendre les éléments DOM et leurs sous-éléments modifiables

<div  contenteditable id="editor">
   </div>

Code de style

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}* {
  margin: 0;
  padding: 0;
}
#editor {
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 15px;
}

* Testé sous Chrome 49 et valide

La méthode suivante fait en sorte que le contenu du texte initialement saisi par l'utilisateur soit enveloppé dans l'élément p

<div  contenteditable id="editor" spellcheck="false"><p><br/></p></div>

Les règles par défaut sont les suivantes

否则将直接作为#editor元素的文本节点，即<div  contenteditable id="editor" spellcheck="false">文本内容</div>同事点击Enter将新增div元素,即<div  contenteditable id="editor" spellcheck="false">文本内容<div></div></div>

Afficher le code

Tous les éléments utilisés dans #editor peuvent être supprimés. Lorsque #editor est un élément vide, les règles par défaut seront appliquées lorsque l'utilisateur produira à nouveau du contenu. Cet état doit être surveillé ici. Lorsqu'il se produit, <. ;p>

Ajoutez-le et positionnez le curseur à la fin de l'élément p

Positionnez le code du curseur

function cursorToEnd(element){
    
    element.focus();var range = window.getSelection();

    range.selectAllChildren(element);
    range.collapseToEnd();
    
}

window .getSelection() IE9 prend déjà en charge

Les situations suivantes peuvent se produire si le positionnement n'est pas effectué

<div  contenteditable id="editor" spellcheck="false">
    111111
    <p><br/></p>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!