入力フォームの文字の色を変える方法

完成版

作成

使用環境：　HTML5 Bootstrap4

index.html

　　　<!--文字変更ボタン-->
    <button onclick="document.execCommand('bold');">太字</button>
    <button onclick="document.execCommand('italic');">斜め文字</button>
    <button onclick="document.execCommand('formatBlock', false, '<h1>')">h1</button>
    <button onclick="document.execCommand('formatBlock',false, '<p>')">p</button>

    <!--色変更ボタン-->
    <button onclick="document.execCommand('foreColor', false, 'red');">赤</button>
    <button onclick="document.execCommand('foreColor', false, 'blue');">青</button>
    <button onclick="document.execCommand('foreColor', false, 'yellow');">黄色</button>
    <button onclick="document.execCommand('foreColor', false, 'green');">緑</button>
    <button onclick="document.execCommand('foreColor', false, 'black');">黒</button>

　<!--入力フォーム-->
  <div id="editor" contenteditable></div>
  

参考