Sponsored Link

›2 24, 2004

MTでもMozillaでも「ひ」ボタンをっ!?

Category: MovableTypeいぢり / 0 Comments: Post / View / 0 TrackBack

あの「ひ」ボタンをMTで使う方法
今まで公開していたのはIE@Win限定だったのですが、
啓示をうけMozilla対応版(たぶん)に直してみました。
つーてもMacじゃ試してないです。誰か買って。

【動作確認済み】
IE6@Win
Mozilla(Firefox0.8)@Win
Opera7@Win(「ひ」ボタンのみ動作、意味ねぇ)

※前バージョンからの差分修正は・・・力尽きました。特別ご要望があれば書きます・・・m(_ _)m

以下、ぶっちゃけIEとMozillaのことしか考えてません。あしからず。

◆いじるファイル


以下、3つのファイルをいじります。
(mt.cgiのあるフォルダ/tmpl/cms)
 ・edit_entry.tmpl
 ・bm_entry.tmpl
(mt.cgiのあるフォルダ)
 ・styles.css
※FTPダウンロード&編集時の文字コードに注意
※あと、念のためバックアップは取りましょう。マジで。

◆edit_entry.tmpl


1:Javascriptのfunction「formatStr」「insertLink」を書き換えます

「formatStr」(選択した文字にタグ付けする)と
「insertLink」(選択した文字でリンクを作成する)は
IE・Mozillaで動かすコードが変わってきますので、
スクリプト出力時にMozillaかどうか識別して切り替えます。
まずは120行目近辺、「formatStr」の中身をまるごと下記のように編集します。

function formatStr (v) {
<TMPL_IF NAME=AGENT_MOZILLA>
    if (!curFieldId) return;
    var s = document.getElementById(curFieldId)
    var sel = getMozSelection(s)
    if (sel.length != 0) {
        var sp = getSelectStart(s)
        var s1 = (s.value).substring(0,sp)
        var s2 = (s.value).substring(getSelectEnd(s),getTextLength(s))
        var astr = '<' + v + '>' + sel + '</' + v + '>'
        s.value = s1 + astr + s2
        s.focus()
        sp += astr.length
        setMozSelection(sp,sp,s)
    }
<TMPL_ELSE>
    if (!document.selection) return;
    var str = document.selection.createRange().text;
    if (!str) return;
    document.selection.createRange().text = '<' + v + '>' + str + '</' + v + '>';
</TMPL_IF>
}

次に、すぐ下に記述されている(はず)「insertLink」を書き換えます。

function insertLink () {
<TMPL_IF NAME=AGENT_MOZILLA>
    if (!curFieldId) return;
    var s = document.getElementById(curFieldId)
    var sel = getMozSelection(s)
    if (sel.length != 0) {
        var sp = getSelectStart(s)
        var s1 = (s.value).substring(0,sp)
        var s2 = (s.value).substring(getSelectEnd(s),getTextLength(s))
        var my_link = prompt('Enter URL:', 'http://')
        if (my_link != null) {
            var astr = '<a href="' + my_link + '">' + sel + '</a>'
            s.value = s1 + astr + s2
            s.focus()
            sp += astr.length
            setMozSelection(sp,sp,s)
        }
    }
<TMPL_ELSE>
    if (!document.selection) return;
    var str = document.selection.createRange().text;
    if (!str) return;
    var my_link = prompt('<MT_TRANS phrase="Enter URL:">', 'http://');
    if (my_link != null)
        document.selection.createRange().text 
            = '<a href="' + my_link + '" target="_blank">' + str + '</a>';
</TMPL_IF>
}

1.5:ついでにショートカットキーも追加(IEのみ?)

前述1でいじった「insertLink」の直後にある、function mtShortCuts () 内。
このfunctionはifで始まる行が並んでいますね。こいつらの最後に以下1行を追加。

if (event.keyCode == 22) insertStr('\n(・e・)\nひよこまーく');

※なぜkeyCodeが22="v"なのかは日本語キーボードの人ならわかるはず(笑)


2:Javascriptのfunctionを2つと変数を1つ追加します

追加する場所は<script>〜</script>内ならどこでもOKですが。
とりあえず上記<script>〜</script>の最後尾にでも以下をコピペします。
(変数名とか旧バージョンから変えてます。いや、何となく。)

var curFieldId;
function setCurFieldId (eTextarea) {
    if (! eTextarea) return;
    curFieldId = eTextarea.id;
}
function insertStr (v) {
    if (!curFieldId) return;
    eval("document.getElementById(curFieldId).value +=  v");
}
<TMPL_IF NAME=AGENT_MOZILLA>
function getSelectStart(s) {
	return s.selectionStart;
}
function getSelectEnd(s) {
	return s.selectionEnd;
}
function getTextLength(s) {
	return s.textLength;
}
function getMozSelection(s) {
	return (s.value).substring(getSelectStart(s), getSelectEnd(s))
}
function setMozSelection(a,z,s) {
    s.selectionStart = a;
    s.selectionEnd = z;
}
</TMPL_IF>

3:エントリ編集用入力フォーム内ボタン表示処理を修正

編集する場所は380行目(今までの編集を加えると450行目)あたり、
<script>〜</script>で囲んでる部分です。

<script language="javascript">
if (document.selection) {
    document.write('<table border="0" cellspacing="0" cellpadding="0">');
    document.write('<tr>');
    【 以 下 略 】

こんな感じになっていますが、
これだとMozillaは if で始まる行以下の処理を通りません。
恐らくその後の行で使っているfunctionがMozillaに対応していなかったため、
IEであるかどうか(?)をチェックしてボタンを表示させていたのだと思います。

先のfunction追加・修正で一応Mozilla対応にしてありますので、
上記チェックでMozillaも通るように書き換えます。以下のように編集して下さい。
参考にしたサイト

<script language="javascript">
var ie5up=ie4=nn4=ns6up=op6=op7=false;
(document.all)?((document.getElementById)?((document.bgColor)?ie5up=true:
(document.createTextNode)?op7=true:op6=true):ie4=true):
((document.layers)?nn4=true:((document.getElementById)?ns6up=true:void(0)));
if ( (document.selection) || (ns6up) || (op7) ) {
    document.write('<table border="0" cellspacing="0" cellpadding="0">');
    document.write('<tr>');
    【 以 下 略 】

※(op7)=オペラ7はおまけっつーか機能拡張サンプルっつーか。


4:ボタン表示処理に「ひ」ボタンを追加

上記3の箇所のすぐ下にボタンを表示する部分がありますので、
ここに「ひ」ボタンを追加します。

document.write('<td width="24"><a href="javascript:formatStr・・・
document.write('<td width="24"><a href="javascript:formatStr・・・
document.write('<td width="24"><a href="javascript:formatStr・・・

上記処理内に以下のコードを追加して下さい。
(オレは先頭に追加しました)

document.write('<td ><a href="javascript:insertStr(\'\\n(・e・)\\nひよこまーく\')">
    <span class="editor-button">ひ</span></a></td>');

※コードが長いので、このページでは上記のように改行してますが、1行にまとめても構いません
ボタン画像は作るのめんどかったので、CSSにてそれっぽく振舞わせてみてます。

で。上記でも動くのですが、
このままだと、近隣で激しく記述されてる各要素へのサイズ指定のお陰で、
ボタンがはみ出したりするので、バイオレントに近辺のサイズ指定を外しました。
(実際には20行くらい前、<td width="402">で始まる行あたりから、
 所々に記述されている「width="xx"」 「height="xx"」をすべて削除)
さらに調子こいて他のボタンもCSSで実現すると、以下のようになります。

<tr>
<td><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font></td>
<td align="right" valign="top">
<script language="javascript">
var ie5up=ie4=nn4=ns6up=op6=op7=false;
(document.all)?((document.getElementById)?((document.bgColor)?ie5up=true:
(document.createTextNode)?op7=true:op6=true):ie4=true):
((document.layers)?nn4=true:((document.getElementById)?ns6up=true:void(0)));
if ((document.selection) || (ns6up) || (op7) ) {
    document.write('<table border="0" cellspacing="0" cellpadding="0">');
    document.write('<tr>');
    document.write('<td><a href="javascript:insertStr(\'\\n(・e・)\\nひよこまーく\')">
        <span class="editor-button">ひ</span></a></td>');
    document.write('<td><a href="javascript:formatStr(\'b\')">
        <span class="editor-button">B</span></a></td>');
    document.write('<td><a href="javascript:formatStr(\'i\')">
        <span class="editor-button">i</span></a></td>');
    document.write('<td><a href="javascript:formatStr(\'u\')">
        <span class="editor-button">u</span></a></td>');
    document.write('<td><a href="javascript:insertLink()">
        <span class="editor-button">URL</span></a></td>');
    document.write('</tr>');
    document.write('</table>');
} else {
    document.write(' ');
}
</script>
</td>
</tr>

5:入力フォームの<TEXTAREA>タグにfunctionを呼び出すイベントハンドラを追加

2でボタンを追加した箇所の直後(400行目近辺)に、
本文記事を入力する為のテキスト欄を表示するコードが書かれています。
(目印は「name="text"」)

<td colspan="2" width="100%" valign="top">
    <textarea<TMPL_IF NAME=AGENT_MOZILLA> cols=""</TMPL_IF> 
        class="width500" name="text" rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10
        <TMPL_ELSE>20</TMPL_IF>" wrap="virtual">
        <TMPL_VAR NAME=TEXT>
    </textarea>
<p>
</td>

このコードを以下のように修正します。(緑色部分を追加)

<td colspan="2" width="100%" valign="top">
    <textarea<TMPL_IF NAME=AGENT_MOZILLA> cols=""</TMPL_IF> 
        class="width500" name="text" rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10
        <TMPL_ELSE>20</TMPL_IF>" wrap="virtual" 
        id="maintext" onfocus="setCurFieldId()">
        <TMPL_VAR NAME=TEXT>
    </textarea>
<p>
</td>

同様に、そのちょっと下にある追記用テキスト欄も編集します。
(目印は「name="text_more"」)

<td colspan="2" valign="top">
    <textarea<TMPL_IF NAME=AGENT_MOZILLA> cols=""</TMPL_IF> 
        class="width500" name="text_more" rows="15" wrap="virtual">
        <TMPL_VAR NAME=TEXT_MORE>
    </textarea>
<p>
</td>

このコードを以下のように修正します。(緑色部分を追加)

<td colspan="2" valign="top">
    <textarea<TMPL_IF NAME=AGENT_MOZILLA> cols=""</TMPL_IF> 
        class="width500" name="text_more" rows="15" wrap="virtual"
         id="moretext" onfocus="setCurFieldId()">
        <TMPL_VAR NAME=TEXT_MORE>
    </textarea>
<p>
</td>

以上でedit_entry.tmplの編集は完了です。


◆bm_entry.tmpl


基本的にedit_entry.tmplと同様にいじればOKです。
スクリプト内部の構成自体とてもよく似ているので迷わず編集できるでしょう。

◆styles.css


どこか適当に(一番最後がベター?)下記をコピペします。

.editor-button {
    display:block; 
    font-size: 10px; 
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "MS P ゴシック", sans-serif; 
    font-weight: bold; 
    margin: 1px; 
    padding-left: 5px; 
    padding-right: 5px; 
    border-bottom: 1px solid #666; 
    border-right: 1px solid #666; 
    text-decoration: none; 
    white-space: nowrap; 
    background: #fff; 
    color: #666; 
}

以上、いじる箇所とその内容でした。
(ちなみにinsertStrの引数を変える事で色々応用できます。^(・:・)^ とかね。)
上記3つをいじってアップロードします。
すると・・・


ねっ。これでMTでもあの機能がっ!心置きなく使えますっ!
自分トコで簡単な動作確認しかしてないのでツッコミ等々希望!
つか、ななちゃんリスペクト!
それから、よ!本当にありがとう!リスペクト!

でわ!

(・e・)
ひよこまーく

Comments
Post a comment












Remember personal info?