MTの編集ボタンを追加・改造(3.3対応プラグイン版)
- 2006年9月 5日 19:26
- mt
「v1.01」の不具合を修正した「v1.02」をリリースしました。「v1.0」からの変更点は「MT3.3以上でBigPAPIにも対応」ということだけなので、導入にあたってはこのページの説明をそのまま適用いただけます。このページにあるダウンロードファイルのリンク先も「v1.02」に修正済みです。
MT3.3以上でBigPAPIにも対応させた「v1.01」をリリースしました。詳しくは「TFforEditButtons v1.01(BigPAPIと両対応バージョン、但しMT3.3専用、動作未確認)」を参照ください。
1年ちかく前に「MTの編集ボタンを追加・改造する」という記事を書いたが、それはMT 3.2までを対象としたカスタマイズの手順になっている。MTは3.2→3.3でだいぶ変わっているので、書いてある手順どおりに作業しようとすると3.3以上の環境ではそぐわない内容が多い。
また、前掲の記事にある手順は「edit_entry.tmpl」などのファイルを直接書き替えるタイプのものだが、そうするとアップグレードのたびに同じカスタマイズを施さなければならないから厄介なのである。3.3から追加された「Transformer」機能によって管理画面を修正・変更するプラグインの開発が容易になったこともあり、まあ世の中「MTの機能追加はプラグインで」ということになってきている。
といったわけで、「MTの編集ボタンを追加・改造する」で実現していたカスタマイズ内容をMT3.3に対応させ、それをプラグイン化してみた。導入手順は以下のとおり。
とその前に、もう一度カスタマイズ内容を説明しておくと、
MTの記事投稿画面にはタグの入力補助をするボタンが付いているが品揃えがいまいちで、かえって便利さよりも「ほしいタグがない」不便さのほうが勝っている。それとこれは Firefox で動作させた場合なのだが、文章をたくさん書いて入力欄(textarea)にスクロールバーが出ているとする。その文章の下部(スクロールバーが下りている状態)で入力しているときにこのボタンを使うと、タグが挿入されるたびにいちいちスクロールバーが上まで戻ってしまい、ひどく不便なのである。web-conte.com | MTの編集ボタンを追加・改造する
というこの2点の改善が目的。
ダウンロード
まず、プラグインファイル(v1.02)をダウンロード。
アップロード
解凍すると、
- editbuttons.css
- editbuttons.js
- TFforEditButtons.pl
の3ファイルが出てくるので、これをそれぞれ、
- MT/mt-static/plugins/TFforEditButtons/editbuttons.css
- MT/mt-static/plugins/TFforEditButtons/editbuttons.js
- MT/plugins/TFforEditButtons.pl
にアップロード(上のふたつを入れる /TFforEditButtons というディレクトリは自分で作ってください)。
以上。
プラグインなので、導入は以上。記事編集画面に行くと、こんな感じになっていると思います。

「TFforEditButtons.pl」をカスタマイズする
キャプチャ画像にあるとおり、提供しているプラグインのデフォルトでは「h4」「p」「ul」「ol」「li」「dl」「dt」「dd」「cite」「pre」「xmp」「br」という私の追加したかったタグが追加されますが、これ以外にもっと追加したい、あるいは class 指定を含めたかたちでタグを挿入したいという場合には、「TFforEditButtons.pl」を自分でいじっていただくことによりカスタマイズが可能です。
以下の説明は「まあ、ソース見ればなんとなくわかるでしょ?」という態度で書かれているために多少親切さを欠きますがご了承ください。
ボタンを追加する場合、「エントリーの内容(body)」の上に付くものと「追記(more)」の上に付くものとふたつあるため、ソースの2箇所に追加する必要があります。
「エントリーの内容(body)」の上
まず「エントリーの内容(body)」の上ですが、「TFforEditButtons.pl」の69行目〜87行目、JavaScriptの document.write() がずらっと並んでいるここをいじれば反映されます。たとえば76行目の、
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text, \\'h4\\', \\'\\');">h4</a> ');
とあるのが「h4」ボタンを追加する部分ですが、これをもとにして要素名のところだけ変え、
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text, \\'div\\', \\'\\');">div</a> ');
という行を追加してやれば「div」ボタンができます。また、挿入されるタグに好みの class 指定を加えたいという場合には、
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text, \\'div\\', \\'image\\');">div</a> ');
というふうに利用します(上記例で作ったボタンをクリックした場合、<div class="image"></div> というタグが挿入されます)。
それから、「br」「hr」などの空要素タグの場合には、空要素タグであることを指定する部分が加わります。デフォルトで入っている「br」ボタンのソース(87行目)をもとにしてください。
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text, \\'br\\', \\'\\', \\'empty\\');">br</a> ');
赤字の部分が加わっていて、これが「空要素タグである」という共通の指定になります。それ以外の書式はいっしょです。
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text, \\'br\\', \\'clear\\', \\'empty\\');">br</a> ');
というふうにすれば <br class="clear" /> が挿入できる、といった具合。
「追記(more)」の上
「TFforEditButtons.pl」の126行目〜144行目がそれにあたります。
write('<a class="textbuttons" title="" href="javascript:void(0);" onclick="return markup_html(document.entry_form.text_more, \\'h4\\', \\'\\');">h4</a> ');
赤字にしたtextareaのnameがちがうだけで、あとは「エントリーの内容(body)」の場合とまったく同じです。
以上。
トラックバック(1)
トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/126
以下のリストにある記事は、当記事 " MTの編集ボタンを追加・改造(3.3対応プラグイン版) " を参照しています :
コメント(21)
こんばんは。
MTのエントリー編集画面にボタンを追加出来ないものか探していたら、ここへたどり着きました。
おおっ!これは…と喜んだのもつかの間、TFforEditButtonsはどうもBigAPIを使っていると当たって動かないんですね(T_T)
BIGPAPIとTransformerが当たるというのは、以前どこかで見ていたのですが、既にBigAPIを使った別のプラグインを使っていて、それは外せないので実に残念です。
失礼…BigAPIじゃなくてBigPAPIでした。
おそらくそう面倒なことではないはずなので、BIGPAPIとTransformerの両対応にしてみます。いましばらくお待ちください。ご使用のMTは3.3でいいんですよね?
こんにちは。
本当ですか!それはありがたいです。
ええ、3.3です。
コメント欄でお知らせするのを忘れてましたが、修正版(BigPAPI対応版)できてます。こちらを参照ください。この記事内にあるダウンロードファイルのリンクも修正版に切り替わってます。
こんにちは、先日はありがとうございました。
ちょっと質問して良いですか?
ボタンの改造についてなんですが、<br class="clear" />という形ではなく、直に<br clear="all" />等を挿入するボタンを「Quote」の横に画像のボタンとして設置したい場合はどのようにすればよいのでしょうか?
どうも。面倒くさがっていたらずるずると間があいてしまいました。ソース等を示して説明する必要から、回答は別記事にしてあります。「『TFforEditButtons』の特殊カスタマイズ」を参照ください。
こんにちは、すみませんしばらく見に来ていませんでした。
わざわざ別記事まで書いていただいてすみません。
初めまして。こちらのプラグインを見つけて早速試してみました。設置もカスタマイズも簡単でとても気に入りました。
しかし、何度かTFforEditButtons.plを書き換え入れ替え作業していたところ、途中から変更した内容に投稿画面の表示が変わらなくなってしまいました。一度リセットの意味でプラグインのファイルをMTからすべて抜いてみたのですが、下記の写真のように表示が残り上段のデフォルトのボタンも機能しなくなりました。
この原因と解決方法が分かりましたら教えていただきたいと思います。どうぞよろしくお願いします。
追記:すみません、画像を貼ることが出来てませんでした。URLに画像へのアドレスを入れておきます。よろしくお願いいたします。
うーん、いやあ、プラグインを抜けば元に戻ると思いますけどねえ。
ひょっとして、
MT 3.2でHTML::Templateのファイルキャッシュを有効にする
↑ここらへんのことをやってませんか?
これやってるとファイルキャッシュが強く残ってプラグインによる変更がなっかなか反映されなかったりしますが。
「MT 3.2でHTML::Templateのファイルキャッシュを有効にする」については施した覚えはないのですが、こちらの問題のようですね...(汗)お手数をお掛けしてすみません。ちょっと調べてみます。
早速のお返事ありがとうございました。
何度もすみません。こちらのミスで「TFforEditButtons.pl」ファイルを気付かずに別のPlug-inディレクトリーに入れていたのが原因でした。どうしようもない理由でご迷惑をおかけしてしまい大変失礼致しました。以後気をつけます。ご迷惑であればこれまでのコメントは消去なさってください。
プラグインの方はカスタマイズも問題なく済んで、快適に使用させて頂いてます。本当にありがとうございました。
いえいえどうも。解決にいたってなによりです。
はじめまして。
とてもカスタマイズしやすく、便利に使わせていただいております。
ただ、1つ問題があります。
IE6・IE7で、この編集ボタンを押すと、
「このページからほかのページに移動しますか?・・・・・・」というアラートが表示されます。
この際「OK」を押しても「キャンセル」を押しても問題なくタグは挿入されるのですが、ボタンを押すたびに表示されるのでウザいです。
「href="javascript:void(0);"」によって、IEがページ移動すると勘違いすることによって出てしまうものだと思うのですが、どうにかなりませんでしょうか?
手っ取り早いのは、「 href="javascript:void(0);"」の部分を削除してしまうことです。これがなくても動作します。ボタンにマウスオーバーしたときに指マークには変わらなくなりますが、クリックすればタグが挿入されます。いかがでしょう?
迅速な返答ありがとうございます。
確かにそうなんですよね。
ただ、これをすると、ボタンの上にマウスオーバーしたとき「I カーソル」に変わってしまいますよね?
機能的にはまったく問題なくなるんですが、どのボタンを選択しているのかわかりにくい気がします。
ボタンの部分を画像にしてしまえば、解決するような気もするのですが、ボタンの数だけ画像を用意しなければならず、手軽なカスタマイズの利点が失われてしまいます。
これらの問題を、スッキリ解決するような方法は無いものでしょうか?ちょっと難しいですかね?
「あ、それならば」と思いつきましたが、「editbuttons.css」をいじります。「#edit-entry .field-buttons a.textbuttons」に対するスタイル指定に「cursor: pointer;」を追加します。(「 href="javascript:void(0);"」の部分を削除した上での話)
#edit-entry .field-buttons a.textbuttons {
display: block;
float: left;
padding: 3px 6px;
margin: 3px 3px 0 0;
border-bottom: 1px solid #8FAEBE;
border-right: 1px solid #8FAEBE;
background-color: #fff;
line-height: 1em;
font-size: 12px;
text-decoration: none;
color: #666;
cursor: pointer;
}
できました!
あきらめかけていたので、とても嬉しいです。
スタイルシートの勉強にもなりました。本当にありがとうございます。
すいません。こちらの内容は商用で利用しても問題ないでしょうか。
>通りすがりさん
迷惑コメントに振り分けられていたのに気がつかず返事が遅くなってすいません。
商用利用、OKです。どうぞよろしく。
コメントする