Pastel Palette.JP(パステルパレット)です。
けいおんとかWORKING!!とかライトな百合とかかわいい女の子を描くのが大好きな木島塔のホームページです。
SitemapContact
新作CG
HOME > Free Talk > TinyMCEの日本語化 その2

TinyMCEの日本語化 その2

TinyMCEの日本語化 その1の続きです。思ったより簡単に日本語化できましたので、今度はツールバーのカスタマイズに挑戦します。

ツールバーのカスタマイズ

HTML内の「// Theme options」の項目で行います。
各ツールバーが順番にカンマ区切りで記述されていますので、単純に移動、削除するだけです。
theme_advanced_buttons1〜theme_advanced_buttons4に分類されていますが、自由に配置できます。以前のバージョンより自由に配置できるのは非常に便利です。
尚、ツールの間にある縦線を挿入したい時は、半角の「|」を入れてください。

theme_advanced_buttons1

save 編集中の文章を保存、多分Cookieを使っている
newdocument 新規編集、編集中の文章は破棄されるので注意。
bold 太字(strongタグ)
italic 斜体
underline アンダーライン
strikethrough 打消し(sタグ)
justifyleft 左寄せ
justifycenter 中央揃え
justifyright 右寄せ
justifyfull 均等割付け
styleselect class指定、指定したCSSの全classが使えます
formatselect h1〜h6、段落(p)等、HTMLの規定のフォーマットを指定
fontselect フォントの種類を指定
fontsizeselect フォントの大きさを指定

theme_advanced_buttons2

cut 切り取り
copy コピー
paste ペースト
pastetext テキストのみペースト
pasteword WORDからペースト
search 文章内の文字列を検索
replace 文字列の置き換え
bullist リスト(ul)
numlist 番号リスト(ol)
outdent インデント解除
indent インデント(span-styleで30pxごと)
blockquote 引用(blockquote)
undo 元に戻す
redo やり直し
link リンクの指定
unlink リンクの解除
anchor アンカーの挿入
image 画像の挿入
cleanup コードの整形(不要なタグの削除?)
help ヘルプ
code HTMLの直接編集
insertdate 日付の挿入
inserttime 時間の挿入
preview プレビュー
forecolor 文字の色を指定
backcolor 背景色を指定

theme_advanced_buttons3

tablecontrols 表の挿入
hr 水平線の挿入
removeformat フォーマットの削除
visualaid 不可視属性タグの表示・非表示の切り替え
sub 下付け
sup 上付け
charmap 特殊文字の挿入
emotions 顔アイコンの挿入
iespell スペルチェック ※IEのみ
media 動画等の挿入
advhr サイズ等を指定できる水平線
print 印刷
ltr、rtl 機能不明、現在調査中
fullscreen フルスクリーン表示

theme_advanced_buttons4

insertlayer レイヤーの挿入
moveforward 前面レイヤーに移動
movebackward 背面レイヤーに移動
absolute 絶対配置に変更
※position:absoluteを追加
styleprops 独自のスタイルを指定
cite 引用、専門用語や略語の説明に使えそう?
abbr、acronym 機能不明、現在調査中
del 削除(del)
ins
attribs
visualchars
機能不明、現在調査中
nonbreaking 「 」を挿入
template テンプレートを挿入
pagebreak 改ページを挿入

補足事項

ツールバーは、theme_advanced_buttons1〜theme_advanced_buttons4まであり、1が基本機能、2が便利な機能、3が中級者向け、4が上級者向け、と実にうまく分けられています。

文字の色、大きさ等は全て<span style〜>でHTML内に直接記述されます。fontタグ等の非推奨のHTMLタグや<b>タグのような古いタグは使っていません。

私は、<span style〜>でタグが煩雑になるのが嫌いなので、必要なフォーマット、レイアウトは全てCSSで定義してclassで指定します。それがHTML本来の姿ですし。

カスタマイズ後のツールバー

カスタマイズしたツールバーの画面

ずいぶんすっきりしました。実際、私が使うのはこれだけです。
各フォーマットはCSS指定するのでフォントの種類、サイズ、色、背景色は不要。tableもCSSで定義していますので、手打ちで十分なのでこれも不要。レイヤー等も使わないので高度な機能も不要ということで、徹底的にシンプルにしました。

次回は・・・

文字サイズと文字の種類のカスタマイズは、私には不要なので解説は省略します。
次はプラグインの設定やTinyMCEの初期化コマンドのタグ等を検証する予定です。

関連リンク