KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

青空文庫エディタが作れないか色々模索2

進捗はあまり進んでいません。

WYSIWYGエディターにクリップボードから貼り付けて、どのようなHTMLに変換されるのかを見ていた。その作業をかんたん化するためにtrixからhtml変換をどうやるのかをググっていると。そういうissueがあったので試してみた。

github.com

内容を見ているとイベントリスナーでtrixのエディター部分が変化したときに、htmlを取得して、htmlの変数に代入するというのがあった。

 

You can get the HTML from the <trix-editor>'s value property:

document.querySelector("trix-editor").value  // "<div>This is an <strong>example</strong></div>"
In a Trix event handler:

document.addEventListener("trix-change", function(event) {
  var element = event.target
  var html = element.value  // "<div>This is an <strong>example</strong></div>"
})

それに、htmlを整形して、textareaに貼り付けて。

html=html_beautify(html);

  document.getElementById("html_text").value = html ;

HTMLの整形にはJS Beautifierというのを使ってみた。

github.com

 

 これで、trixにHTMLからクリップボードで貼り付けたのが、どのようなHTMLに変換されるのが簡単に見えるようになった。