web-conte.com | blue | MTの編集ボタンを追加・改造する

blue

MTの編集ボタンを追加・改造する

Posted by: SOMA Hitoshi
October 6, 2005 8:11 PM
mt

以下の内容はMT 3.3以降には当てはまりません。新しい記事「MTの編集ボタンを追加・改造（3.3対応プラグイン版）」を書きましたので、そちらを参照ください。

MTの記事投稿画面にはタグの入力補助をするボタンが付いているが品揃えがいまいちで、かえって便利さよりも「ほしいタグがない」不便さのほうが勝っている。それとこれは Firefox で動作させた場合なのだが、文章をたくさん書いて入力欄（textarea）にスクロールバーが出ているとする。その文章の下部（スクロールバーが下りている状態）で入力しているときにこのボタンを使うと、タグが挿入されるたびにいちいちスクロールバーが上まで戻ってしまい、ひどく不便なのである。

そこで上図のようにひととおりのボタンを追加し、使用する JavaScript を代えて「スクロールバーが上に行かないようにする」ための方法。

その1: mt_ja.js

まず代替に使う JavaScript を、投稿画面が読み込んでいる外部 jsファイルの「mt_ja.js」に付け足す。/MT/mt-static/ にある「mt_ja.js」を開き、以下のスクリプトを追加する。

var function_available;
var is_IE;
init();

function markup_html_br (e) {
  markup(e, '<br />', '', '');
  return false;
}

function get_range (e) {
    if (document.selection)
        return document.selection.createRange().text;
    else {
        var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
  
        return e.value.substring(start, end).replace(/(.*)\n+$/,"$1");       
    }
}

function set_range (e, v) {
    if (document.selection)
        document.selection.createRange().text = v;
    else {
        var scrollTop=e.scrollTop;

var length = e.textLength;
        var start = e.selectionStart;
        var end = e.selectionEnd;
        if (end == 1 || end == 2) end = length;
        e.value = e.value.substring(0, start) + v + e.value.substr(end, length);

e.setSelectionRange(start, start + v.length);
  e.focus();
  e.scrollTop=scrollTop;
    }
}

なお、この JavaScript は「はてなダイアリー」の「日記を書く」画面で用いられているもので、それに少しだけ手を加えた。ありがとう「はてなダイアリー」。

その2: styles.css

同じく /MT/mt-static/ にある「styles.css」をいじる。追加するボタンの表示位置を確保するためと、ボタン用にいちいち画像を用意しているのは面倒なので追加分のボタンは皆テキストリンクにしてしまい、それをスタイルシートで装飾して「ボタン感」を出すため。

2030行目付近〜の、

#edit-entry .field-header {
  width: 580px;
  height: 18px;
  position: relative;
  }

を

#edit-entry .field-header {
  width: 580px;
  height: 36px;
  position: relative;
  }

に。
2043行目付近〜の、

#edit-entry .field-buttons {
  position: absolute;
  bottom: -3px;
  right: 0;
  }

に１行追加して、

#edit-entry .field-buttons {
  position: absolute;
  bottom: -3px;
  right: 0;
  text-align: right;
  }

とする。
最後に、その付近の適当なところに以下を追加。

#edit-entry .field-buttons br {
  display: block;
  clear: both;
  margin: 3px 0 0 0;
  }

#edit-entry .field-buttons a.textbuttons {
  display: block;
  float: left;
  padding: 2px 5px;
  margin: 0 0 0 3px;
  border-bottom: 1px solid #8FAEBE;
  border-right: 1px solid #8FAEBE;
  background-color: #fff;
  line-height: 1em;
  }

その3: edit_entry.tmpl

そうしたら、/MT/tmpl/cms/ にある「edit_entry.tmpl」をいじる（テンプレートHTMLの修正）。

344行目付近にある、

を

に置き換え。
それと、そのすぐ下のほうにある、

を

に置き換え。

もしこれ以外に追加したいボタンがある場合、<xxx>〜</xxx> と選択範囲を囲むタグであれば、上記のところに任意に、

を付け足せばいい。以上。

トラックバック(6)

トラックバックURL: https://web-conte.com/blue/mt-tb.cgi/71

以下のリストにある記事は、当記事 " MTの編集ボタンを追加・改造する " を参照しています :

MTの編集機能 from nobubu Eyes

エントリー投稿のカスタマイズを久々にしてみました。アップデートしてるうちに消え...

2005年10月21日 15:36

【続】MTの編集ボタンを追加・改造する from web-conte.com

「MTの編集ボタンを追加・改造する」にconducさんからコメントをいただいていた。ボタンは正常に動いていて、非常に助かっているのですが、ページ自体を下...

2005年10月23日 21:15

エントリーの編集を楽にするボタンを追加しました from あそび

Movable Typeを3.2-ja-2にアップグレードしてからエントリー投...

2005年10月25日 21:19

MTの編集ボタンを追加・改造 from ROVER

MTの編集ボタンを追加・改造しました。・Heading　見出しをつける・Pa...

2006年1月14日 15:34

MTの編集ボタンを追加・改造する from bookmark.wendigo

web-conte.com | MTの編集ボタンを追加・改造する...

2006年2月 6日 19:22

MTの編集ボタンを追加・改造（3.3対応プラグイン版） from web-conte.com

１年ちかく前に「MTの編集ボタンを追加・改造する」という記事を書いたが、それはMT 3.2までを対象としたカスタマイズの手順になっている。MTは3.2→3...

2006年9月 5日 22:47

MTの編集ボタンを追加・改造する

その1: mt_ja.js

その2: styles.css

その3: edit_entry.tmpl

関連記事

トラックバック(6)

最近のエントリー (blue)

検索

Tags Most Used (All)

カテゴリー

アーカイブ

リンク

日記

広告