スタイル コード html,body { overflow: hidden; height: 100%;} * { マージン: 0;"/> スタイル コード html,body { overflow: hidden; height: 100%;} * { マージン: 0;">
ホームページ > 記事 > ウェブフロントエンド > 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 が空の要素 ユーザーがコンテンツを再度出力すると、デフォルトのルールが適用されます。この状態が発生した場合は、
カーソルコードの位置決め
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 サイトの他の関連記事を参照してください。