要素編集可能なコンテンツ編集可能

contentEditable：制御要素は、リッチテキストエディタと同じ編集することができます

<div contenteditable="true">
  This text can be edited by the user.
</div>

HTML要素のcontentEditable属性をtrueに設定すると、「document.execCommand（）」メソッドを使用することができます。この方法では、関連する実行できるコマンドを編集可能領域の内容を操作します。

異なるブラウザは、改行の異なる取り扱いを持っていることに留意すべきであるが、我々は、デフォルトの改行動作を指定することができます（Firefoxは、IEが/オペラが使用する<BR>挿入<P>、クロム/ Safariがの<div>を使用します）：
document.execCommand("defaultParagraphSeparator", false, "p");

：一般的な使用のcontentEditableは、次の3つの方法を使用します
document.createTextNode、document.createRange、window.getSelectionを

document.createTextNodeは
から継承し、：平文ノードdocument.createTextNode（文字列データ）を作成するノード・インタフェースを。

document.createRangeが
作成レンジ Range.getBoundingClientRectは（）/ Element.getBoundingClientRect（）このメソッドは、ページを取得するための（新しいメソッドを追加することが有用であることを特徴とする（インターフェイスが文書テキストノードの部分の断面を表すノードを含みます）、左、上、右と下の要素、それぞれ、ブラウザウィンドウの相対位置）。