Laravel CKEditor リアルタイムプレビューの実装と初期値の設定

Every Qiita #2
のんびり独学初学者の毎日投稿チャレンジ 2日目
今回は・・・
自作コミュニティアプリ開発でリッチテキストエディタを実装した時の備忘録です。

##プレビュー表示の概要(javascript)

1. ckeditorを実装
2. 初期値を設定
3. キーボードを入力する度に関数を呼び出し
4. データの取り出し
5. 指定した要素に挿入

上記の流れでやっていこうと思います。

実装

editor.html

<textarea id="editor" name="ckeditor" ></textarea>
<p>プレビュー</p>
  <p class="preview" id="preview">
</p>

editor.js

window.onload = function(){
     // ckeditorの実装
     const ckeditor = CKEDITOR.replace("editor", {
        uiColor: "#EEEEEE",
        height:600,
     });
     // 実装準備完了時の関数読み込み
     ckeditor.on("instanceReady",function(e){
     // ckeditorのインスタンス化
      const editor_instance =CKEDITOR.instances.editor;
     // 初期値設定
      editor_instance.setData(
        "<h3>[質問内容]:</h3><strong><br>[発生している問題]:</strong><p></p><br><br><strong>[試したこと]:</strong><p></p><br><br><strong>[備考欄（バージョン指定やその他知りたいこと)]:</strong><p></p>");
     // リアルタイム表示関数読み込み
      editor_instance.document.on("keyup",function(){
     // オブジェクトデータ取得
        const data = editor_instance.getData();
     // 指定elementIdに表示
        document.getElementById("preview").innerHTML=data;
      });
     });
 };

keyupイベントがあったのでそちらを使用しました。
入力されたデータをgetDataメソッドで取得し、innerHTMLで指定したidに挿入しております。