HTML に関する投稿を表示しています

document.designMode = “On”;

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

わけあってリッチエディタについてちょろっと調べてみたら、なんと簡単にできるじゃないですか。
キーワードは「document.designMode = "On";」

ここで必要なもの

  • Webブラウザ
    最近のブラウザであればだいたい大丈夫です。
    スマホは未確認です。
  • JSをさっくりと読める程度の力
  • HTMLをさっくりと読める程度の力

おおまかな手順

  1. HTMLを書きます

    <html><body>
        <button onclick="editor.execCommand('undo')">元に戻す</button>
        <button onclick="editor.execCommand('bold')">太字</button>
        <button onclick="editor.execCommand('italic')">斜体</button>
        <iframe></iframe>
        <script>
            editor = document.getElementsByTagName("iframe")[0].contentDocument;
            editor.designMode = "On";
        </script>
    </body></html>
  2. Enjoy!

なるほどわからん

  • <html>
    buttonとiframeがあるだけのHTMLを用意します。
    button:ボタンを表示する
    iframe:フレームを用意して、別のページを表示する。

  • <button>
    1. <button onclick="editor.execCommand('XXXXX')">
      onclickは、クリックされた時の処理を書きます

    2. editor.execCommand
      editor変数に対して、execCommandという関数を呼びます。
      execCommandはdesignMode="On"(あとで説明)のドキュメントに対して使用できます。
      これをつかうと様々な"リッチな機能"を使えます。

  • <script>
    1. document.getElementsByTagName
      現在のドキュメント内に該当するタグを検索する。戻り値は配列

    2. document.getElementsByTagName("iframe")[0]
      iframe要素の0番目、ひとつしか無いからそれを持ってくるはず

    3. document.getElementsByTagName("iframe")[0].contentDocument
      iframe要素の0番目の中身のドキュメントを参照する
      iframe内は、別のWebページみたいな扱いなのでそういうことですね。

    4. editor変数にiframe内のドキュメントを投入しておく
      onclickイベントで簡単に書きたいのでこうします。

    5. editor.designMode = "On";
      documentオブジェクトに対して、designModeプロパティを"On"に設定することで、
      リッチなエディタができちゃいます。

限られた空間だけエディタ化したかったので、iframeを使いました。

おわりに

ボタンを増やして、
execCommandを増やして、
CSSとか書くとよいと思います。

参考

Mozilla におけるリッチテキスト編集 | MDN