TinyMCE4のツールボタンについて
ツールボタンの設定方法
その1) 今使っているツールバーに追加する
admin.js
の //TinyMCE 以降の toolbar
オプション部分に、
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image pagebreak',
赤字部分に以下のツールボタン一覧に記載されている任意のツールボタンを追加します(上記はページ区切り(続きを読む)を追加した場合)。複数設定する場合は半角空白で区切ってください。
※ボタンをたくさん追加すると、投稿画面のTinyMCEの部分が横にはみ出てしまうので、適当に仕切り線「 | 」を追加してください(幅がはみ出そうになったらその部分で折り返す仕様です)。
その2) ツールバーを2段にする
admin.js
の //TinyMCE 以降の toolbar
オプションを、
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
'link image pagebreak',
のように変更して下さい。
複数設定する場合は半角空白で区切り、「 | 」を追加すれば仕切り線が表示されるのは同じです。
ツールバーそのものを表示しない
admin.js の //TinyMCE 以降の部分に、toolbar
オプションを
toolbar: false,
と変更してください。
TinyMCE4.xのツールボタン
※標準装備されているもの(core)(※はfreo1.20.1の admin.js
に設定済みのもの)
ツールボタン名 | アイコン | ツールチップの表示 | 説明 |
---|---|---|---|
newdocument | 新規ドキュメント | 新しい文書を作成 | |
bold ※ | 太字 | 現在の選択に太字の書式 <strong> を適用 |
|
italic ※ | 斜体 | 現在の選択にイタリック体 <em> を適用(freoのデフォルトのスタイルでは太字になる) |
|
underline | 下線 | 現在の選択範囲にアンダーライン形式 <span style="text-decoration: underline;"> を適用 |
|
strikethrough | 打ち消し線 | 現在の選択範囲に取り消し線形式 <span style="text-decoration: line-through;"> を適用 |
|
alignleft ※ | 左寄せ | 現在のブロックまたは画像の配置を左寄せにする | |
aligncenter ※ | 中央揃え | 現在のブロックまたは画像の配置を中央揃えにする | |
alignright ※ | 右寄せ | 現在のブロックまたは画像の配置を右寄せにする | |
alignjustify ※ | 両端揃え | 現在のブロックまたは画像の配置を両端揃えにする | |
alignnone | no alignment | 現在のブロックまたは画像の配置を削除 | |
styleselect | 書式 | 書式スタイルのドロップダウンリスト | |
formatselect | 段落 | ブロックフォーマットのドロップダウンリスト | |
fontselect | フォントファミリー | フォントファミリーのドロップダウンリスト カスタムの設定方法 | |
fontsizeselect | フォントサイズ | フォントサイズのドロップダウンリスト カスタムの設定方法 | |
cut | 切り取り | 現在の選択範囲をクリップボードに切り取る | |
copy | コピー | 現在の選択範囲をクリップボードにコピー | |
paste | 貼り付け | 現在のクリップボードの内容をエディタに貼り付け | |
outdent ※ | インデントを減らす | 現在のリスト項目またはブロック要素のインデントを減らす | |
indent ※ | インデントを増やす | 現在のリスト項目またはブロック要素のインデントを増やす | |
blockquote | 引用 | ブロック引用符形式を現在のブロックレベル要素に適用 | |
undo ※ | 元に戻す | 最後の操作を元に戻す | |
redo ※ | やり直す | 最後に元に戻した操作をやり直す | |
removeformat | 書式をクリア | 現在の選択範囲からすべての書式を削除 | |
subscript | 下付き文字 | 現在の選択範囲に下付き文字 <sub> を適用 |
|
superscript | 上付き文字 | 現在の選択範囲に上付き文字 <sup> を適用 |
|
visualaid | 表の枠線を点線で表示 | ビジュアルエイドのオン/オフを切り替え | |
insert | (挿入) | さまざまな挿入アクションを1つのボタンにまとめてドロップダウンリストに |
※プラグインと関連するもの(※はfreo1.20.1の admin.js
に設定済みのもの)
関連プラグイン名はプラグイン一覧の設定名と同じ。該当のプラグインを admin.js
に設定しておかないとツールバーには表示されません。
ツールボタン名 | アイコン | ツールチップの表示 | 関連プラグイン | 説明 |
---|---|---|---|---|
hr | 水平罫線 | hr | エディタに水平罫線を挿入 | |
bullist ※ | 箇条書き | lists | 現在の選択範囲を箇条書きリストとして整形 | |
numlist ※ | 番号付き箇条書き | lists | 現在の選択範囲を番号付きリストとして整形 | |
link ※ | リンクの挿入・編集 | link | リンクダイアログを開く | |
unlink | リンクの削除 | link | 現在の選択範囲からリンクを削除 | |
openlink | Open link | link | 選択したリンクのリンク先URLを新しいタブで開く | |
image ※ | 画像の挿入・編集 | image | 画像の挿入・編集ダイアログを開く | |
charmap | 特殊文字 | charmap | 特殊文字ダイアログを開く | |
pastetext | テキストとして貼り付け | paste | プレーンテキストとしてペーストするかオン/オフで切り替え | |
印刷 | 現在のドキュメントを印刷 | |||
preview | プレビュー | preview | 現在のドキュメントをプレビュー | |
anchor | アンカー(リンクの到達点) | anchor | エディタにアンカーを挿入 | |
pagebreak ※ | ページ区切り | pagebreak | エディタに改ページ(freoでは続きを読む)を挿入 | |
spellchecker | スペルチェック | spellchecker | スペルチェッカーのオン/オフを切り替え | |
searchreplace | 検索と置き換え | searchreplace | 検索と置き換えダイアログを開く | |
visualblocks | 文章の区切りを点線で表示 | visualblocks | 可視性ブロックのオン/オフを切り替え | |
visualchars | 不可視文字を表示 | visualchars | 改行しないスペースの表示/非表示を切り替え | |
code | ソースコード | code | ソースコードダイアログを開く | |
help | help | ヘルプダイアログを開く | ||
fullscreen | 全画面表示 | fullscreen | フルスクリーンのオン/オフを切り替え | |
insertdatetime | 日付 | insertdatetime | 現在の日付/時刻をエディタに挿入 | |
media | メディアの挿入・編集 | media | メディアの挿入・編集ダイアログを開く | |
nonbreaking | 固定スペース( ) | nonbreaking | 改行しないスペースをエディタに挿入 | |
save | 保存 | save | 現在のエディターの内容をフォームまたはajax呼び出しに保存(freoでは登録される) | |
cansel | キャンセル | save | 編集の内容を初期状態にキャンセル/リセット(freoでは表示されない) | |
table | 表 | table | テーブル要素の作成/編集のドロップダウンリスト | |
tableprops | 表の詳細設定 | table | 表の詳細設定ダイアログを開く(表ツールバー) | |
tabledelete | 表の削除 | table | 表の削除(表ツールバー) | |
tablecellprops | セルの詳細設定 | table | セルの詳細設定ダイアログを開く | |
tablemergecells | セルの結合 | table | 選択したセルを結合する | |
tablesplitcells | セルの分割 | table | セルを分割する | |
tableinsertrowbefore | 上側に行を挿入 | table | 現在の行の上に新しい行を挿入 | |
tableinsertrowafter | 下側に行を挿入 | table | 現在の行の下に新しい行を挿入 | |
tabledeleterow | 行の削除 | table | 現在の行を削除 | |
tablerowprops | 行の詳細設定 | table | 行の詳細設定ダイアログを開く | |
tablecutrow | 行の切り取り | table | 選択した行を切り取る | |
tablecopyrow | 行のコピー | table | 選択した行をコピーする | |
tablepasterowbefore | 上側に行を貼り付け | table | 現在の行の上に行を貼り付ける | |
tablepasterowafter | 下側に行を貼り付け | table | 現在の行の下に行を貼り付ける | |
tableinsertcolbefore | 左側に列を挿入 | table | 現在の列の左に列を挿入 | |
tableinsertcolafter | 右側に列を挿入 | table | 現在の列の右に列を挿入 | |
tabledeletecol | 列の削除 | table | 選択した列を削除 | |
rotateleft | 反時計回りに回転 | imagetools | 現在の画像を反時計回りに回転 | |
rotateright | 時計回りに回転 | imagetools | 現在の画像を時計回りに回転 | |
flipv | 上下に反転 | imagetools | 現在の画像を上下に反転 | |
fliph | 水平に反転 | imagetools | 現在の画像を左右に反転 | |
editimage | 画像の編集 | imagetools | 画像ダイアログで現在の画像を編集 | |
imageoptions | 画像オプション | imagetools | 画像オプションダイアログを開く | |
fullpage | ドキュメントのプロパティ | fullpage | 全ページのプロパティを文書化する | |
ltr | 左から右 | directionality | 文書を左読みに設定 | |
rtl | 右から左 | directionality | 文書を右読みに設定 | |
emoticons | 絵文字 | emoticons | 絵文字のダイアログを開く | |
template | テンプレートの挿入 | template | テンプレートをエディタに挿入 | |
forecolor | テキストの色 | textcolor | 文字色を選択範囲に適用 | |
backcolor | 背景色 | textcolor | 背景色を選択範囲に適用 | |
restoredraft | 前回の下書きを復活させる | autosave | 最新の自動保存されたドラフトに復元 | |
insertfile | moxiemanager | MoxieManager(有料プラグイン)ダイアログを開く | ||
a11ycheck | a11ychecker | Accessibility Checker(有料プラグイン)ダイアログを開く | ||
toc | 目次 | toc | エディタに目次を挿入 |