H5リッチテキストエディタの詳しい紹介

H5 グローバル属性 contenteditable を使用して、DOM 要素とそのサブ要素を編集可能にします

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

スタイル コード

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

* Chrome 49 でテストされ、有効です

次のメソッドにより、ユーザーは次のことを行うことができます初期化 入力テキストの内容は p 要素でラップされます

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

デフォルトのルールは次のとおりです

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

コードを表示

#editor が空の要素 ユーザーがコンテンツを再度出力すると、デフォルトのルールが適用されます。この状態が発生した場合は、

にカーソルを置きます。 p要素の末尾

カーソルコードの位置決め

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

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

window.getSelection() IE9はすでにサポートしています

位置決めを行わないと以下の状況が発生する可能性があります

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

以上がH5リッチテキストエディタの詳しい紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。