Detaillierte Einführung in den H5-Rich-Text-Editor

Verwenden Sie das globale H5-Attribut contenteditable, um DOM-Elemente und ihre Unterelemente bearbeitbar zu machen

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

Stilcode

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

* Getestet unter Chrome 49 und gültig

Mit der folgenden Methode wird der ursprünglich vom Benutzer eingegebene Textinhalt in das p-Element eingeschlossen

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

Die Standardregeln lauten wie folgt

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

Code anzeigen

Alle im #editor verwendeten Elemente können gelöscht werden, wenn der Benutzer den Inhalt erneut ausgibt ;p>

Fügen Sie es hinzu und positionieren Sie den Cursor am Ende des p-Elements

Positionieren Sie den Cursorcode

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

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

window .getSelection() IE9 unterstützt bereits

Die folgenden Situationen können auftreten, wenn keine Positionierung durchgeführt wird

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den H5-Rich-Text-Editor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!