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

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

TinyMCEを動かしてみる

青空文庫エディタ

青空文庫エディタをMeryの入力補助があるが、エディターに不慣れな人にとってはワードのように使えたほうがいいのだろう。そこで、ワードのように見たまま入力する方法はないかと考えた。ただ、見たまま入力できるWYSIWYGはふりがなに対応していないものが多く、HTMLを読み込ませるとふりがなが削除されるケースが多い。 CKEditordraft、draft-js、quillはふりがなのタグが削除されTinyMCEがふりがなが削除されなかった。なのでフリガナを扱うためには、TinyMCEしか選択肢がなかった。なぜふりがなが削除されるかというと、htmlをパースするときにふりがなの処理が用意されていない。日本人の開発者が少ない気がする、外国でフリガナの機能が絵文字並みに流行れば、対応するソフトが増えそうだなと思うが。

TinyMCEを動かしてみる

TinyMCE CommunityとLanguage Packsをダウンロードした。TinyMCE Community内のtinymceフォルダーの下のlangsフォルダーにja.jsを入れてtinymce.min.jsを読み込んでいる。

<head>
  <script src="tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>tinymce.init({ selector:'#text',language: "ja", });</script>
</head>
<body>
  <textarea id="text">Next, use our Get Started docs to setup Tiny!</textarea>
</body>

なにもプラグインを読み込まないと最低限の機能しかない。

htmlの取得 tinyMCE.get("text").getContent();

青空文庫形式に変換できないかを見ていたが、書き方がいろいろであった。

見出し ふりがな 挿絵 hr区切り linkタグ リストタグ コードブロック 太字、傍点、傍線、斜体、下線、打ち消し、下付き、上付き bold strong em italic u del sub sup

縦中横も入れたかったが対応するタグがなかった。縦中横はspan class tcyとするものが多く、パースをするにはクラスの中で判断する必要がある。

TinyMCEがルビに対応しているようなので、 cccabinet.jpn.org

webrandum.net 青空文庫HTML変換 github.com

www.h-fj.com

qiita.com

toshi-toma.hatenablog.com