web上でテキストエディタを実現する方法を調べてみた

現状textareaタグとcontenteditableの2種類があるみたいですね。


textarea


<textarea id="editor" rows="5" cols="80" spellcheck="true">textarea</textarea>

  • 複数行入力可能なフィールド
  • 文字の色などが変更できない
  • 簡単なスペルチェックなどもしてくれる
  • 単純なものなら割と簡単に実装可能


contenteditable


<div class="editor" contenteditable=true style="border:1px solid #808080;">編集可能</div>
編集可能
  • web上のHTMLを直接編集するイメージ
  • 色やサイズなどcssでweb上で表現できることは実現可能
  • コピペでデザインなどもペースト可能(この記事のタイトルなどをコピペしてみるとわかりやすい)
  • いろいろなメソッドが用意されており、かなり応用が効く
  • いくつかショートカットキーが用意されている
  • ちょっと難易度が高い



ガッツリやるならcontenteditableですかね

2015年11月8日日曜日