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 | エディタに目次を挿入 |