May 1st,2016
“contenteditable”属性について
“contenteditable”属性は要素がユーザーによって編集可能かどうかを示す属性です。“contenteditable”属性は任意の要素に指定することで、“textarea”要素や“input”要素の代わりとなるリッチテキストエディタを実装するのに使用することができます。
“contenteditable”属性の値が“true”の場合、その要素はユーザーの操作によって編集することができるようになります。ユーザーが要素の内容に文字を入力もしくは削除したり、ドラッグしたり、他所からコピーしたコンテンツを貼り付けたりすることができるようになります。
“contenteditable”属性の値が“plaintext-only”の場合でもユーザーが要素を編集することが可能になりますが、リッチテキストの整形は無効となります。例えば、値が“true”の場合はコピー元のスタイルが適用されたままのコンテンツを要素内に貼り付けることができますが、“plaintext-only”の場合は貼り付けされるのはプレーンテキストのみとなります。
“contenteditable”属性の値が“false”の場合、要素をユーザーが編集することははできません。
“contenteditable”属性が指定されていない場合は継承の状態になり、親要素の“contenteditable”属性の値に従います。
サンプルコード
“contenteditable="true"”
<menu>
<li><button onclick="bold();">太字</button></li>
<li><button onclick="italic();">イタリック</button></li>
<li><button onclick="underline();">下線</button></li>
</menu>
<div contenteditable="true">
<blockquote>
<p>
秋は夕暮れ<br>
夕日のさして<br>
山の端いと近うなりたるに<br>
烏のねどころへ行くとて<br>
三つ四つ、二つ三つなど<br>
飛びいそぐさえ あはれなり<br>
まいて雁などの つらねたるが<br>
いと小さく見ゆるは いとをかし<br>
日入り果てて<br>
風の音 虫の音など<br>
はた言ふべきにもあらず<br>
</p>
<p><cite>枕草子</cite> 清少納言著 より引用</p>
</blockquote>
</div>
<script>
function bold() {
document.execCommand('bold', false)
};
function underline() {
document.execCommand('underline', false)
};
function italic() {
document.execCommand('italic', false)
};
</script>
秋は夕暮れ
夕日のさして
山の端いと近うなりたるに
烏のねどころへ行くとて
三つ四つ、二つ三つなど
飛びいそぐさえ あはれなり
まいて雁などの つらねたるが
いと小さく見ゆるは いとをかし
日入り果てて
風の音 虫の音など
はた言ふべきにもあらず
枕草子 清少納言著 より引用
“contenteditable”属性が指定された要素の中にあるテキスト以外のものもドラッグしたり削除したりすることができます。
<div contenteditable="true">
<p>以下の画像はこのウェブサイトのリンク用のバナーです。リンクをする場合はこのバナーを使用するかウェブサイトの名前「havin'a coffee break」のテキストでリンクしてください。</p>
<p><img src="banner.gif" alt="リンク用のバナー"></p>
<p>※バナーはダウンロードして使用してください。直リンクは禁止です。</p>
</div>
以下の画像はこのウェブサイトのリンク用のバナーです。リンクをする場合はこのバナーを使用するかウェブサイトの名前「havin'a coffee break」のテキストでリンクしてください。
※バナーはダウンロードして使用してください。直リンクは禁止です。
“contenteditable="plaintext-only"”
<menu>
<li><button onclick="bold();">太字</button></li>
<li><button onclick="italic();">イタリック</button></li>
<li><button onclick="underline();">下線</button></li>
</menu>
<div contenteditable="plaintext-only">
<blockquote>
<p>
秋は夕暮れ<br>
夕日のさして<br>
山の端いと近うなりたるに<br>
烏のねどころへ行くとて<br>
三つ四つ、二つ三つなど<br>
飛びいそぐさえ あはれなり<br>
まいて雁などの つらねたるが<br>
いと小さく見ゆるは いとをかし<br>
日入り果てて<br>
風の音 虫の音など<br>
はた言ふべきにもあらず<br>
</p>
<p><cite>枕草子</cite> 清少納言著 より引用</p>
</blockquote>
</div>
<script>
function bold() {
document.execCommand('bold', false)
};
function underline() {
document.execCommand('underline', false)
};
function italic() {
document.execCommand('italic', false)
};
</script>
秋は夕暮れ
夕日のさして
山の端いと近うなりたるに
烏のねどころへ行くとて
三つ四つ、二つ三つなど
飛びいそぐさえ あはれなり
まいて雁などの つらねたるが
いと小さく見ゆるは いとをかし
日入り果てて
風の音 虫の音など
はた言ふべきにもあらず
枕草子 清少納言著 より引用
“contenteditable="false"”
<div contenteditable="false">
<blockquote>
<p>
秋は夕暮れ<br>
夕日のさして<br>
山の端いと近うなりたるに<br>
烏のねどころへ行くとて<br>
三つ四つ、二つ三つなど<br>
飛びいそぐさえ あはれなり<br>
まいて雁などの つらねたるが<br>
いと小さく見ゆるは いとをかし<br>
日入り果てて<br>
風の音 虫の音など<br>
はた言ふべきにもあらず<br>
</p>
<p><cite>枕草子</cite> 清少納言著 より引用</p>
</blockquote>
</div>
秋は夕暮れ
夕日のさして
山の端いと近うなりたるに
烏のねどころへ行くとて
三つ四つ、二つ三つなど
飛びいそぐさえ あはれなり
まいて雁などの つらねたるが
いと小さく見ゆるは いとをかし
日入り果てて
風の音 虫の音など
はた言ふべきにもあらず
枕草子 清少納言著 より引用
“contenteditable”属性によって編集可能にされた要素の子要素に“contenteditable="false"”を指定するとその要素を編集不可にすることができます。ただし、その子要素自体を削除することは可能です。
<div contenteditable="true">
<p>編集ができる要素の表示例の中のテキストです。この文章はユーザーが書き換えることができます。</p>
<p contenteditable="false">この部分は編集することができないが、全体を削除することはできてしまう。</p>
<p>この部分もユーザーが書き換えることができる。</p>
</div>
編集ができる要素の表示例の中のテキストです。この文章はユーザーが書き換えることができます。
この部分は編集することができないが、全体を削除することはできてしまう。
この部分もユーザーが書き換えることができる。
