独自のWYSIWYGエディタを構築する方法

WYSIWYGエディターのシンプルなバージョンを見せています.
あなたがHTMLとJavaScriptに慣れているならば、あなたは行ってよいです.
だから我々のシンプルなバージョンを開始しましょう
私はすべてを説明していないが重要なもの
まず、HTML要素にcontentEditable属性を追加する必要があります

 <div class="editor" contenteditable>
      <h1>Simple Html editor</h1>
      <p>Good to start</p>
    </div>

現在、div要素は編集可能です、そして、我々のHTML文書はexecCommandを公開します.
のコマンドを見てみましょう

document.execCommand(cmd,defaultUI,value);

execcommand 3つの引数を必要とする
CMD :どのコマンドを実行するかを伝える必要があることを意味します.
例:「大胆な」commandslist
Defaultui :デフォルトのユーザーインターフェイスが表示されているかどうかを調べます.
値:いくつかのコマンドに値引数を追加する必要があります.
例: createlink cmdでは、リンク内のhref属性を参照する値を追加する必要があります.
したがって、実行時にexeccommandを使うようにしましょう
今、私はボタンのHTML要素を作成し、それにイベントリスナーを添付します.

  <button class="tool-items fa fa-bold" 
  onclick="document.execCommand('bold', false, '');">
 </button>

今、我々は、下にフルバージョンを大胆なコマンドをチェックアウト構築されます.