トップページ > TinyMCE4の解説 > TinyMCE4のツールボタンについて

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 プレーンテキストとしてペーストするかオン/オフで切り替え
print   印刷 print 現在のドキュメントを印刷
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   固定スペース(&nbsp;) 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 エディタに目次を挿入