割烹エディターの開発メモ4（変換部の作成）

Editor.jsの出力はJSON形式なのでそれをHTML形式に変換しないといけない。なので変換部を作る。

JSON形式を見てみると

blocks要素のtypeを調べてそれごとの処理を考えればいい。

そのあとの設定項目でさらに分岐させる感じにする。ということで実装していきます。

文章を書くところ：<br>
<div id="editor"></div>
<button id="save-button">押すと変換される</button><br>
変換した後のソースコードが出力されるところ：<br>
<textarea id="output-text"></textarea>
<button id="copy-button">押すとコピーすることができる</button><br>
<pre id="output"></pre>

まずはHTMLの方に出力後の置き場所としてtextareaを作成。

変換ボタン、コピーボタンを作ります。（縦書きで作ったのを再利用）

次に、ボタンを押したときの処理を追加。前回はinput buttonに処理を書いていたけど今回はイベントリスナーを利用する。アロー関数にも慣れたい。

   const saveButton = document.getElementById('save-button');
   const output = document.getElementById('output');
   const outputtext = document.getElementById('output-text');

   saveButton.addEventListener('click', () => {
     editor.save().then( savedData => {
       output.innerHTML = JSON.stringify(savedData, null, 4);
       outputtext.innerHTML = parsedata(savedData);
     })
   });
   
   const copyButton = document.getElementById('copy-button');
   copyButton.addEventListener('click', () => {
       outputtext.select();
       document.execCommand("Copy");
   });

saveButton.addEventListener('click', () => {});でボタンを押した処理を実現。

outputtext.innerHTML = parsedata(savedData);でパースしたHTMLタグを返す。

function parsedata(savedata){
   
   let returndata = '';
   
   savedata.blocks.forEach((value,index) =>{
   
   switch (value.type){
           
       case 'paragraph':
           returndata += ('<p>' + value.data.text + '</p>');
           break;
           
       case 'p':
           returndata += value.data.text + '\n';
           break;
           
       default:
           break;
   }
});
   
   return returndata;
   
}

パースは.forEach((value,index)で要素をループさせて実行。

value.typeで分岐させている。今は簡単な処理しか書いてないけど、増やしていく。

細かいところはカスタムブロックを作成するときに追加していく。

コピーボタンは縦書きと同じ処理だから特に説明しない。

ということで暫定の出力ができたので、ここからメインを作り込んでいこうと思います。