imuiRichtextboxのカスタマイズ
imuiRichtextboxは記載の通りTinyMCEを使用しているので、 リッチテキストボックス内のフォントを追加する際には、TinyMCEのfontfamily欄を確認して実装する。
初期値はimuiRichtextboxのplainParameterで渡すことが可能となっている。
そのため例えば游ゴシックを追加する場合は、游ゴシック＋デフォルトの定義のスタイルで定義を渡します。
具体的には下記のような実装を行うことで実現できます。
(実装時の画面を公開できないのが残念ですが…)
ファンクションコンテナ側
sample.js
// グローバル変数で設定
// ''内がスタイルとして定義される
// 表示名=スタイル, スタイル; で1つの定義
var defaultParameter = 'font_formats: "游ゴシック=Yu Gothic, \'游ゴシック\',\
YuGothic, \'游ゴシック体\', sans-serif;Andale Mono=andale mono,times;\
Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde;\
Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif;\
Courier New=courier new,courier; Georgia=georgia,palatino;\
Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol;\
Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco;\
Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; \
Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats"'
function init(){
}
プレゼンテーションページ側
sample.html
<imart type="imuiRichtextbox" plainParameter=defaultParameter />
その他やってる設定
- デフォルトフォント設定
var defaultParameter = content_style: "body { 'font-size': '12px'; }";
- デフォルトフォントはCSSが設定されないので、デフォルトでスタイルを適用する
例）改行時pタグ内に font-size 12px、font-family Arialを設定
var defaultParameter = "forced_root_block: 'p', \
forced_root_block_attrs: {'font-size': '12px',\
'font-family': 'arial,helvetica,sans-serif'}"
参考公式ドキュメントよりも詳しいTinyMCEの使い方（応用編）
まとめ
- imuiRichtextboxのカスタマイズはplainParameterで渡す
- TinyMCEで確認できますが、intra-mart上のバージョン(4.7.4)と整合性が取れていないので、実際に動かしてみて確認する