あの「ひ」ボタンをMTで使う方法、
今まで公開していたのはIE@Win限定だったのですが、
神の啓示をうけMozilla対応版(たぶん)に直してみました。
つーてもMacじゃ試してないです。誰か買って。
【動作確認済み】
IE6@Win
Mozilla(Firefox0.8)@Win
Opera7@Win(「ひ」ボタンのみ動作、意味ねぇ)
※前バージョンからの差分修正は・・・力尽きました。特別ご要望があれば書きます・・・m(_ _)m
以下、ぶっちゃけIEとMozillaのことしか考えてません。あしからず。
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>
}
if (event.keyCode == 22) insertStr('\n(・e・)\nひよこまーく');
※なぜkeyCodeが22="v"なのかは日本語キーボードの人ならわかるはず(笑)
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>
<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はおまけっつーか機能拡張サンプルっつーか。
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>
<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の編集は完了です。
.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つをいじってアップロードします。
すると・・・

でわ!
(・e・)
ひよこまーく