この記事は公開されてから1年以上経過しており、最新の内容に追従できていない可能性があります。
わけあってリッチエディタについてちょろっと調べてみたら、なんと簡単にできるじゃないですか。 キーワードは「document.designMode = “On”;」
ここで必要なもの
- Webブラウザ 最近のブラウザであればだいたい大丈夫です。 スマホは未確認です。
- JSをさっくりと読める程度の力
- HTMLをさっくりと読める程度の力
おおまかな手順
-
HTMLを書きます
<html><body> <button onclick="editor.execCommand('undo')">元に戻す</button> <button onclick="editor.execCommand('bold')">太字</button> <button onclick="editor.execCommand('italic')">斜体</button> <iframe> <script> editor = document.getElementsByTagName("iframe")[0].contentDocument; editor.designMode = "On"; </script> </body></html> - Enjoy!
なるほどわからん
- <html>
buttonとiframeがあるだけのHTMLを用意します。
button：ボタンを表示する
iframe：フレームを用意して、別のページを表示する。
</li> <li><button> <ol> <li> <button onclick="editor.execCommand('XXXXX')"> onclickは、クリックされた時の処理を書きます </li> <li> editor.execCommand editor変数に対して、execCommandという関数を呼びます。 execCommandはdesignMode="On"（あとで説明）のドキュメントに対して使用できます。 これをつかうと様々な"リッチな機能"を使えます。 </li> </ol> </li> <li><script> <ol> <li> document.getElementsByTagName 現在のドキュメント内に該当するタグを検索する。戻り値は配列 </li> <li> document.getElementsByTagName("iframe")[0] iframe要素の0番目、ひとつしか無いからそれを持ってくるはず </li> <li> document.getElementsByTagName("iframe")[0].contentDocument iframe要素の0番目の中身のドキュメントを参照する iframe内は、別のWebページみたいな扱いなのでそういうことですね。 </li> <li> editor変数にiframe内のドキュメントを投入しておく onclickイベントで簡単に書きたいのでこうします。 </li> <li> editor.designMode = "On"; documentオブジェクトに対して、designModeプロパティを"On"に設定することで、 リッチなエディタができちゃいます。 </li> </ol> </li>
限られた空間だけエディタ化したかったので、iframeを使いました。