技術資料

TinyMCEツールバーをカスタマイズ—不要なボタンを削除してシンプルにする方法

作成日:2012.01.31

TinyMCEを使ったWYSIWYGエディタにおいて、ツールバーに表示されるボタンをカスタマイズする方法をご紹介します。不要なボタンを削除したり、表示するボタンを減らすことで、よりシンプルで軽量なインターフェースを実現できます。

error この記事は最終更新日から13年以上が経過しています。

以前、自作のフォームに TinyMCE を導入して WYSIWYG エディタにする方法という記事を書きましたが、今回はその続編です。

上記の記事のコードを元にTinyMCEを自作フォームのtextareaに適用すると、編集用のツールバーには四行にわたって大量のボタンが表示されます。

もちろんWYSIWYGエディタなので多機能なのは良いのですが、中には「これいらねーだろ」ってボタンや、インターフェイスによっては「色々あると重すぎるから必要なボタンだけでいいや」というケースなんかもあるかと思います。

そういった場合、TinyMCE設置用のJavaScriptの以下の部分を修正すれば、設置するボタンの種類を変更できます。

<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

	// 以下の四行が各行のボタンの設定箇所
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	// ↑ボタン配置設定ここまで↑
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,

	content_css : "styles.css",
});
</script>

それぞれ、「theme_advanced_buttons1」「theme_advanced_buttons2」「theme_advanced_buttons3」「theme_advanced_buttons4」が、一~四行目に何のボタンを配置するかという設定部分です。

それぞれの行に「save,newdocument,|,bold,italic,underline,strikethrough,|,...」という具合に、カンマ区切りで設定するボタンの種類が書かれています。
それぞれのボタンがどういう名前と紐付けられているかは、実際の画面と比較すれば容易でしょう。
また、「|」は区切り線です。区切り線をツールバー内に入れる場合も、「|」自体をカンマで区切って入れます。

上記のコードでは四行にわたってツールバーが表示されますが、この行数を減らしたい、という場合、表示したくない行以降の「theme_advanced_buttons*」の項目自体を削除してしまえば大丈夫のようです。
ただし、例えば、

	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "",

という風に、「この行からは要らないよ」という行の設定を「""」で空に設定しないと、環境によっては空行が挿入されて見た目が変になってしまったりしてしまうケースがあるようですので注意。

この記事を書いた人

※上が私です。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールWeb制作会社様向け業務案内一般企業様向け業務案内もご覧くださいね。

チェックボックス操作のためのjQuery基本メモ

2025.02.05

jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。

JavaScript jQuery

jQueryでフォームのreadonly属性を操作する方法

2025.02.04

jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。

JavaScript jQuery

ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例

2024.12.11

サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。

HTML JavaScript jQuery

contenteditableで作るインライン編集システムとデータ送信の仕組み

2024.12.03

contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。

CSS HTML JavaScript jQuery

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ!

個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP