TinyMCEに入力した内容を青空文庫注記として取り出そうとしてあれやこれやした記録

　TinyMCEの初期設定など 99nyorituryo.hatenablog.com

必要な機能の絞り込み

「見出し、ルビ、縦中横、太字、傍点、傍線、斜体、下線、打ち消し、下付き、上付き」などがあればいいかな

showryu.web.fc2.com

縦書きは可能か

tinymce\skins\content\default のCSSを書き換えると縦書きにはなったので縦書き自体は可能なようだ。実際に縦書きにしてみると、縦書きは文字の入力があまり慣れていないので、入力に時間がかかる。縦書き入力はやりにくいので、縦中横の確認のために縦書きに一時的に切り替えるほうがいいかもしれない。　content_css:"style/book-style.css” と電書協のCSSを指定すると電書協のEPUBと同じ表示になった。

電書協のCSSを読み込むとどうなるか

電書協のEPUBではCSSで縦書きかどうかを決めるのではなく、hltr、vrtlのクラスで指定しているため

body_class : "vrtl"

と指定すると縦書きになる。

tinyに文字を読み込ませるには下記のように指定する。tinyのhtmlタグ付きの文字を読み込ませるとhtml内容が表示された。

tinymce.activeEditor.setContent("");

qiita.com

TinyMCEでbタグがstrongに変換されてしまう。valid_elementsにbタグを追加すると保存されるようだ。valid_elementsを指定すると指定したものしか読み取らないので、追加する分ともともとの分の両方を書く必要がある。boldをspanタグのclassでboldに指定すると、変換されないし。電書協cssと同じ表現になる。

formats:{
            bold: {inline: 'span', 'classes': 'bold'},
        },

tinymce.init({
  selector: "textarea",
  formats: {
    bold: {inline: 'b'},  
    italic: {inline: 'i'}
  },
  valid_elements: "b,i,b/strong,i/em"
  toolbar: "bold italic underline"
});

forum.pkp.sfu.ca TinyMCE CSS and custom styles

www.tiny.cloud

tinyにボタンでタグを追加する方法を調べる。縦中横を文字を選択して縦中横ボタンを押すと縦中横になってほしいが可能かどうかを調べる。そのほかにルビや傍点も指定できればいいのではないかと思っている。