ホームページ > ウェブフロントエンド > H5 チュートリアル > H5リッチテキストエディタの詳しい紹介

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

零下一度
リリース: 2017-07-21 14:10:04
オリジナル
3458 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート