運営者情報

運営してるひと: @sters9

       

妻と猫と横浜あたりに住んでいる。最近は Go や Kubernetes や GCP をしています。 PHP や JavaScript もすこし。

プライバシーポリシー

tools.gomiba.co

アーカイブ

2021/02 (12) 2021/01 (8)

2020/05 (2) 2020/04 (2) 2020/02 (2) 2020/01 (1)

2019/12 (3) 2019/11 (2) 2019/10 (5) 2019/09 (3) 2019/07 (6) 2019/06 (4) 2019/04 (3) 2019/01 (2)

2018/12 (6) 2018/10 (4) 2018/09 (6) 2018/08 (7) 2018/07 (16) 2018/06 (7) 2018/05 (7) 2018/04 (5) 2018/03 (3) 2018/02 (10) 2018/01 (6)

2017/12 (8) 2017/11 (6) 2017/10 (10) 2017/09 (12) 2017/08 (12) 2017/07 (3) 2017/06 (1) 2017/01 (4)

2016/12 (5) 2016/10 (3) 2016/09 (1) 2016/07 (2) 2016/06 (1) 2016/04 (1) 2016/02 (1) 2016/01 (2)

2015/12 (1) 2015/10 (1) 2015/09 (3) 2015/06 (1) 2015/01 (1)

2014/08 (2) 2014/07 (3) 2014/05 (1) 2014/01 (7)

2013/12 (2) 2013/11 (4) 2013/10 (1) 2013/09 (1) 2013/08 (3) 2013/07 (4) 2013/06 (5) 2013/05 (2) 2013/04 (7) 2013/03 (1)

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>
        <script>
            editor = document.getElementsByTagName("iframe")[0].contentDocument;
            editor.designMode = "On";
        </script>
    </body></html>
  2. Enjoy!

なるほどわからん

  • <html> buttonとiframeがあるだけのHTMLを用意します。 button:ボタンを表示する iframe:フレームを用意して、別のページを表示する。
    </li>
    <li>&lt;button>
        <ol>
            <li>
                &lt;button onclick="editor.execCommand('XXXXX')">
                onclickは、クリックされた時の処理を書きます
    
            </li>
            <li>
                editor.execCommand
                editor変数に対して、execCommandという関数を呼びます。
                execCommandはdesignMode="On"(あとで説明)のドキュメントに対して使用できます。
                これをつかうと様々な"リッチな機能"を使えます。
    
            </li>
        </ol>
    
    </li>
    <li>&lt;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を使いました。

おわりに

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

参考

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