magazine off

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

投稿日 : 2017年10月24日(火曜日)

環境

  • 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>

 

on.gif

Categories

Recent Posts

pod setup will not end forever

  Cause gem update gem install coc…

投稿日 : 2018年3月23日(金曜日)

天才イーロンマスク、資産2000億ドル復帰、再び世界一の富豪になる

  天才イーロンマスク、資産2000億ドル復帰、再び世界一の富豪になる &nb…

投稿日 : 2021年9月29日(水曜日)

「愛」とは何ですか?

 こんにちわ、りょすけです。 今日もQuoraの質問に答えてみたで。 …

投稿日 : 2020年9月21日(月曜日)

コード問題なく動いてるんだけど、どう動いてるか謎なときw😆

   SNSで回ってた動画があったのでシェアしますw &nb…

投稿日 : 2021年10月15日(金曜日)