あゝ　人生に涙あり:その他カスタマイズ　その2

二〇〇五年七月十八日（月）海の日

その他カスタマイズ　その2

エントリーの画面で文字に色をつけたりするためのボタン
ちょっと面倒だった。

まずは、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>

はあはあ。