html5とJavascriptでリッチテキスト実装

環境

html
html5
javascript
js
リッチテキスト

実装

<html>
  <body onload='init();'>

    <table border=1 >
      <tr>
         <td onmousedown='doc.execCommand("italic", false, null);'>
           Italic</td>
         <td onmousedown='doc.execCommand("underline", false, null);'>
           Underline</td>

        <td onmousedown='doc.execCommand("formatBlock", false,  "h1", null);'>
           h1</td>

        <td onmousedown='doc.execCommand("formatBlock", false,  "h2", null);'>
           h2</td>

        <td onmousedown='doc.execCommand("formatBlock", false,  "h3", null);'>
           h3</td>
      </tr>
    </table>

        <table border=1 >
      <tr>
                 <td style="color:#FF0000;" onmousedown='doc.execCommand("foreColor", false,  "#FF0000", null);'>
           赤</td>
                 <td style="color:#0000CD;" onmousedown='doc.execCommand("foreColor", false,  "#0000CD", null);'>
           青</td>
                 <td style="color:#008000;" onmousedown='doc.execCommand("foreColor", false,  "#008000", null);'>
           緑</td>
                 <td style="color:#9ACD32;" onmousedown='doc.execCommand("foreColor", false,  "#9ACD32", null);'>
           黄色</td>
                 <td style="color:#32CD32;" onmousedown='doc.execCommand("foreColor", false,  "#32CD32", null);'>
           緑</td>
                 <td style="color:#FFA500;" onmousedown='doc.execCommand("foreColor", false,  "#FFA500", null);'>
           オレンジ</td>
                 <td style="color:#D3D3D3;" onmousedown='doc.execCommand("foreColor", false,  "#D3D3D3", null);'>
           灰色</td>
                 <td style="color:#000000;" onmousedown='doc.execCommand("foreColor", false,  "#000000", null);'>
           黒</td>
                 <td style="color:#FFFF00;"onmousedown='doc.execCommand("foreColor", false,  "#FFFF00", null);'>
           黄緑</td>
                 <td style="color:#00BFFF;" onmousedown='doc.execCommand("foreColor", false,  "#00BFFF", null);'>
           水色</td>
                <td style="color:#FF69B4;" onmousedown='doc.execCommand("foreColor", false,  "#FF69B4", null);'>
           ピンク</td>
                <td style="color:#9932CC;" onmousedown='doc.execCommand("foreColor", false,  "#9932CC", null);'>
           紫</td>
      </tr>
    </table>

    <script type="text/javascript">
      var doc;
      function init()
      {
        id = "edit";
        if (document.all) {
          // IE
          doc = frames[0].document;
        } else {
          doc = document.getElementById(id).contentDocument;
        }
        doc.designMode = "on";
      }
    </script>

    <iframe id="edit" width="500px" height="400px"></iframe>
  </body>
</html>

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！