やむやむ: これで完成！エントリ編集便利ボタン

2004年 12月 22日（水）　先負　　今日は何の日？　　2005年の今日のエントリ

Top ＞ MovableType ＞ MTカスタマイズ＞これで完成！エントリ編集便利ボタン

これで完成！エントリ編集便利ボタン

エントリ編集便利ボタンの総括に、「今度は文字の背景に色を付ける小技を装備」をプラスして、
基本はなかよしこよしさまの「エントリーをラクチンにするために(3.x 以降)」なんだけど、
それに自分なりに＋α して、完成版としました。
ここで手を加えるのは　mt.js と tmpl/cms/edit_entry.tmpl ですが、
今まで、ひとつずついろんなボタンを追加されてる方は、必要な要素だけプラスしてください。
ここでは、デフォルトの mt.js と tmpl/cms/edit_entry.tmpl から話を進めます。

まずは、mt.js に以下を付け足します。

function replaceEntity(str) { // 置換処理
str = str.split("&").join("&"); // & から変換すること
str = str.split("<").join("<");
str = str.split(">").join(">");
str = str.split('"').join(""");
return(str);
}
function changeEntity(obj) {
if (document.selection) { // WinIE
obj.focus();
var str = document.selection.createRange().text;
if (str) {
document.selection.createRange().text = replaceEntity(str);
} else if (obj.value && confirm('テキストエリア内の「&,<,>,"」を実体参照化します。\n\nよろしいですか？')) { // 選択されていないとき
obj.value = replaceEntity(obj.value);
}
} else if ( (obj.selectionEnd - obj.selectionStart) > 0 ) { // Mozilla
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = replaceEntity(obj.value.substring(bgnPos, endPos));
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen); // 選択し直し
} else if (obj.value) { // Others (テキストエリア内全てが対象)
if (confirm('テキストエリア内の「&,<,>,"」を実体参照化します。\n\nよろしいですか？')) {
obj.value = replaceEntity(obj.value);
}
}
return;
}
function changeTag(str) { // 置換処理
str = str.split('<').join("<");
str = str.split('>').join(">");
str = str.split('"').join('"');
str = str.split('&').join("&"); // & は最後に変換
return(str);
}
function reverseEntity(obj) {
if (document.selection) { // WinIE
obj.focus();
var str = document.selection.createRange().text;
if (str) {
document.selection.createRange().text = changeTag(str);
} else if (obj.value && confirm('テキストエリア内の実体参照文字を「&,<,>,"」に変換します。\n\nよろしいですか？')) { // 選択されていないとき
obj.value = changeTag(obj.value);
}
} else if ( (obj.selectionEnd - obj.selectionStart) > 0 ) { // Mozilla
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = changeTag(obj.value.substring(bgnPos, endPos));
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen); // 選択し直し
} else if (obj.value) { // Others (テキストエリア内全てが対象)
if (confirm('テキストエリア内の実体参照文字を「&,<,>,"」に変換します。\n\nよろしいですか？')) {
obj.value = changeTag(obj.value);
}
}
return;
}
function addClear(obj)
{
var item = '<div style="clear: both"> </div>';
//IE
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
}
//Mozilla
else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item
+ obj.value.substring(endPos, obj.value.length);
//Other
} else {
obj.value += item;
}
}
function changeFontsize(obj, tag) {
var startTag = '<span style=\"font-size:' + tag + '\;\">';
var endTag = '</span>';
//IE
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
if(!str) {
return;
}
document.selection.createRange().text = startTag + str + endTag;
return;
}
//Mozilla
else if ((obj.selectionEnd - obj.selectionStart) >0) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ startTag
+ obj.value.substring(startPos, endPos)
+ endTag
+ obj.value.substring(endPos, obj.value.length);
return;
}
//Other
else {
obj.value += startTag + endTag;
}
}
function changeFontcolor(obj, tag) {
var startTag = '<span style=\"color:' + tag + '\;\">';
var endTag = '</span>';
//IE
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
if(!str) {
return;
}
document.selection.createRange().text = startTag + str + endTag;
return;
}
//Mozilla
else if ((obj.selectionEnd - obj.selectionStart) >0) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ startTag
+ obj.value.substring(startPos, endPos)
+ endTag
+ obj.value.substring(endPos, obj.value.length);
return;
}
//Other
else {
obj.value += startTag + endTag;
}
}
function colorSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.all.colcol.style.backgroundColor = v;
document.selection.createRange().text = '<span style="color:' + v + ';">' + str + '</span>';
}
function colorSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.colcol.options[document.all.colcol.selectedIndex].value == "------") return;
v = document.all.colcol.options[document.all.colcol.selectedIndex].value;
document.selection.createRange().text = '<span style="color:' + v + ';">' + str + '</span>';
}
function fontsizeSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.selection.createRange().text = '<span style="font-size:' + v + ';">' + str + '</span>';
}
function fontSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.foncha.options[document.all.foncha.selectedIndex].value == "------") return;
v = document.all.foncha.options[document.all.foncha.selectedIndex].value;
document.selection.createRange().text = '<span style="font-size:' + v + ';">' + str + '</span>';
}

function bgSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "BG") return;
v = options[selectedIndex].value;
}
document.all.bg.style.backgroundColor = v;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}

function bgSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.bg.options[document.all.bg.selectedIndex].value == "BG") return;
v = document.all.bg.options[document.all.bg.selectedIndex].value;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}

次は、edit_entry.tmpl です。body のところには・・・

<script type="text/javascript">
');
write('');
}
}

// -->
</script>
<![if !gte IE 5]>
<div style="float: right;">
<select>
<option value="">Font
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#009933')">Green
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#6666ff')">Blue
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#ff3300')">Red
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#FF3333')">red
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#FFFF33')">yellow
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#3399FF')">blue
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#00FF66')">green
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#CC6600')">brown
</select>
</div>
<![endif]>

同様に　extend のところには・・・

<script type="text/javascript">
');
}
}

// -->
</script>
<![if !gte IE 5]>
<div style="float: right;">
<select>
<option value="">Font
<option onclick="javascript:changeFontsize(document.entry_form.text,'50%')">50%
<option onclick="javascript:changeFontsize(document.entry_form.text,'70%')">70%
<option onclick="javascript:changeFontsize(document.entry_form.text,'130%')">130%
<option onclick="javascript:changeFontsize(document.entry_form.text,'200%')">200%
</select>
</div>
<![endif]>
</div>

こんな感じに並べてみました。以下の記述は上記とダブるので、body と extend の両方から消しました。

<TMPL_IF NAME=CAN_UPLOAD>
if (canFormat) {
with (document) {
write('<a title="<MT_TRANS phrase="Upload File">" href="<TMPL_VAR NAME=SCRIPT_URL>?__mode=start_upload&blog_id=<TMPL_VAR NAME=BLOG_ID>" onclick="window.open(this.href, \'upload\', \'width=400,height=450,resizable=yes\'); return false"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-file.gif" alt="<MT_TRANS phrase="Upload File">" width="22" height="16" /></a>');
}
}
</TMPL_IF>

なかよしこよしさまの「エントリーをラクチンにするために(3.x 以降)」に、
「今度は文字の背景に色を付ける小技を装備」の内容をプラスした完成版になりました。

MT3.2 へのカスタマイズはこちらをごらんください。（2005年11月8日追記）

この記事はどうでしたか？（お気軽に記事に点数を付けてみてくださいね♪）
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0)　総合点:(2129)　投票人数:(717)

エントリーURL

このエントリーのURL（リンク用タグ付き）:
　

トラックバックURL

このエントリーのトラックバックURL:
　

トラックバック

≫ ムサビコム引っ越し大作戦５：モジュール化への道 from Musabi Diary - a-bit-
広報の千葉（仮名）です。いよいよ一番やりたかったモジュール化です。 ... [続きを読む]

Tracked on 2005年01月19日 11:55

≫ ムサビコム引っ越し大作戦６：まとめ from Musabi Diary - a-bit-
広報の千葉（仮名）です。まとめです。... [続きを読む]

Tracked on 2005年01月19日 11:57

≫ MTの管理画面をHTMLエディタ風に from L・E・L・S
なかよしこよしさんのエントリーをラクチンにするために(3.x 以降)で、管理画面... [続きを読む]

Tracked on 2005年02月04日 17:07

≫ いまさらエントリにアイコン設置 from Dontkoi OMG!
今日は朝からMTのカスタマイズです、エントリ画面にアイコンを入れたんですがスキル... [続きを読む]

Tracked on 2005年02月10日 17:04

≫ エントリーのタグボタン増設 from 左利きのラプソディ
やむやむ様の所で大変便利なものを発見したので早速導入してみました。これで完成！... [続きを読む]

Tracked on 2005年02月14日 20:16

≫ エントリー編集ボタン from grumble
いつもいつも苦労してました。 MTカスタマイズメモをエントリーするたびに「 ... [続きを読む]

Tracked on 2005年05月27日 19:48

≫ エントリ投稿画面の便利ボタン from a6
エントリを投稿する画面で、デフォルトのままだと太字・イタリックなどのHTMLを... [続きを読む]

Tracked on 2005年07月22日 18:06

≫ MT(MovableType)のエントリー投稿･編集画面をカスタマイズ！ from DIGITALL!!
　名文を生み出すためには最高の環境で推敲する事が必要だと思いまして。カッコ良... [続きを読む]

Tracked on 2005年12月02日 02:18

さえらさん、こんにちはー！
いつもお世話になっております

こちらの記事を参照させていただき、エントリーを楽にするボタンを取り付けてみました。
エントリーの編集がさらに楽なり、嬉しいです。
先に付けた絵文字とも相性は悪くないようです。
とっても満足しています
どうもありがとうございました

絵文字も増えたんですね～ハートとても可愛いですードキドキ

今後とも宜しくお願いいたします。
ではでは

Posted by

ポムポム

at 2005年01月06日 10:57 [RES]

>>1 ポムポムさん
w(゜o゜）w オーッ　ボタンも付けられましたか。グッ！
絵文字、増やしてみたよー。ドキドキこの吹き出しの、かわいくて前から欲しかったのよねー。

Posted by

さえら

at 2005年01月06日 13:26 [RES]

トラックバックいただきました L・E・L・S さま、
そちらにお邪魔してコメントしようとしたのですが、できませんでした。ぺこ＜(＿＿)＞

Posted by

さえら

at 2005年02月04日 21:08 [RES]

はじめまして。
MTの編集時に、チョコチョコと参考にさせていただき、本当にありがとうございます
さて、今回、「エントリ編集便利ボタン」でも参考にさせていただいているのですが、デフォルトのedit_entry.tmpl を言われたとおりの編集すると無事に動くのですが、
以前より導入していたエントリー時の絵文字を入れると、文字の色が指定できなくなり困っています
さえらさんも、同じように絵文字を入れているようですが、どこか変更されたのでしょうか？
何か、お気づきの点があればお教えください。
本文には、さえらさんと同じ方法で絵文字を入れるようにしています。
追記の方は、あゆみさんを参考して導入しています。

Posted by

ねこ。

at 2005年02月06日 11:47 [RES]

>>4 ねこ。さん
はじめまして。(￣- ￣ ) ンー・・・ほかになにか入れられてるものとの相性が悪かったりするのでしょうか。
あと、うちの場合は本文と追記の両方につけるとエラーになってしまいましたので、
どちらかだけに　つけるようにしています。
思いつくことって・・・これくらいなんですけど・・・あんまりお役に立てなくてごめんなさい。
うまく動くようになるといいですね。

Posted by

さえら

at 2005年02月06日 11:55 [RES]

さえらさん、早々のお返事ありがとうございます
さえらさんのコメントを読み、「本文と追記の両方につけるとエラー」で気が付きました閃いた！
私も、本分・追記ともにカラーをつけていました
これが原因かと思い、本文のみとしたところ無事に設置できました
本文で、入力し、必要箇所を追記に持っていけるようにしました。
本当にありがとうございました

Posted by

ねこ。

at 2005年02月06日 12:55 [RES]

>>6 ねこ。さん
わぁー、よかったですぅ。　^(ノ゜ー゜）ノ☆パチパチ
頼りない返事でごめんなさいねー。
そうそう。本文のテキストエリアで打って、カット＆ペーストで　追記のテキストエリアに持ってくしかないですよね。
でもよかった、ホント。ニコッ

Posted by

さえら

at 2005年02月06日 14:57 [RES]

昨日は、お世話になりました。
blogPeopleに登録させていただきましたので、報告させていただきます。
これからもよろしくお願いします

Posted by

ねこ。

at 2005年02月07日 06:25 [RES]

>>8 ねこ。さん
ヾ(＠⌒ー⌒＠)ノおはようございまーす。
blogPeople ありがとうございました。
こちらこそ、今後とも　よろしくお願いします。

Posted by

さえら

at 2005年02月07日 07:59 [RES]

はじめまして。
大変便利なものをご紹介しておられますね。早速導入し便利に使っております。
感謝感謝です！ありがとうございました。
MTを始めてまだ日が浅いのですがあれやこれやいじっています。
絵文字の導入等他の記事も参考にさせていただきます。
「これで完成！エントリ編集便利ボタン」ですが当方でも紹介したいと思い
この記事に対してトラックバックさせていただきました。

Posted by

touch at 2005年02月14日 20:52 [RES]

>>10 touchさん
はじめまして～。ご丁寧にありがとうございます。
いろいろ、便利な技を見つけたらすぐに真似してみたくなっちゃうんですよねー。
(*￣∇￣*)エヘヘ

Posted by

さえら

at 2005年02月14日 21:31 [RES]

コメントしてください

サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Amazon Search

Google Similar

★岡山県★	18日	19日
天気
最高気温	12	13
最低気温		3
00－06降水確率	--	10
06－12降水確率	20	0
12－18降水確率	30	0
18－24降水確率	20	0

00-01時		21 (2.0%)
01-02時		19 (1.8%)
02-03時		16 (1.5%)
03-04時		6 (0.6%)
04-05時		7 (0.7%)
05-06時		12 (1.1%)
06-07時		24 (2.2%)
07-08時		16 (1.5%)
08-09時		46 (4.3%)
09-10時		65 (6.1%)
10-11時		76 (7.1%)
11-12時		51 (4.8%)
12-13時		68 (6.4%)
13-14時		77 (7.2%)
14-15時		62 (5.8%)
15-16時		48 (4.5%)
16-17時		86 (8.0%)
17-18時		55 (5.1%)
18-19時		27 (2.5%)
19-20時		27 (2.5%)
20-21時		42 (3.9%)
21-22時		69 (6.4%)
22-23時		84 (7.9%)
23-24時		66 (6.2%)

・ぴゅあ	8-186-248
・あくあ	8-187-241
・とまと	8-187-242
ランダム表示

2004年 12月 22日（水） 先負 今日は何の日？ 2005年の今日のエントリ

これで完成！エントリ編集便利ボタン

2004年 12月 22日（水）　先負　　今日は何の日？　　2005年の今日のエントリ