为Movable Type 3.17文章编辑区增加功能按钮

和许多花哨的Blog程序不同，Movable Type历来以专业著称，连后台的文章编辑区都没有使用流行的所见即所得（WYSIWYG）编辑器，而是以文本框辅以功能按钮。这种方式极大的保证了MT后台编辑在各种浏览器下的兼容性，编辑的效率也不见得低到哪里去。不过MT自带的功能按钮较少，无法满足图文混排和设置字体的需要，因此我对其进行了修改，修改后的功能按钮增加了不少：

mt-text-1.gif

那么，是如何修改的呢？请跟我来。（此修改适用于MT 3.17)

更改后的效果图如下：

mt-text-2.gif

首先，用你喜欢的编辑器打开MT程序根目录下的mt.js文件，在此文件的末尾添加上以下几个函数：

function decodeIt(textfield) {

strSelection = ""

if (document.selection) {

strSelection = document.selection.createRange().text;

strSelection = strSelection.replace(new RegExp("<","g"), "<");

strSelection = strSelection.replace(new RegExp(">","g"), ">");

document.selection.createRange().text = strSelection;

}

//MOZILLA/NETSCAPE support

else if (textfield.selectionStart || textfield.selectionStart == '0') {

textfield.focus();

var startPos = textfield.selectionStart;

var endPos = textfield.selectionEnd;

strSelection = textfield.value.substring(startPos, endPos)

strSelection = strSelection.replace(new RegExp("<","g"), "<");

strSelection = strSelection.replace(new RegExp(">","g"), ">");

textfield.value = textfield.value.substring(0, startPos) + strSelection + textfield.value.substring(endPos, textfield.value.length);

}

}

function InsertImage(myField) {

var myValue = prompt('Enter the URL of the image', 'http://');

if (myValue) {

myValue = '<img src="'

+ myValue

+ '" alt="' + prompt('Enter a description of the image', '')

+ '" />';

//IE support

if (document.selection) {

myField.focus();

sel = document.selection.createRange();

sel.text = myValue;

myField.focus();

}

//MOZILLA/NETSCAPE support

else if (myField.selectionStart || myField.selectionStart == '0') {

var startPos = myField.selectionStart;

var endPos = myField.selectionEnd;

myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

myField.focus();

myField.selectionStart = startPos + myValue.length;

myField.selectionEnd = startPos + myValue.length;

} else {

myField.value += myValue;

myField.focus();

}

}

}



function insertFont (e) {

if (!canFormat) return;

var str = getSelected(e);

if (!str) return;

var my_link = prompt('请输入字体颜色,可留空: red/blue/green/brown/:', '');

var your_link = prompt('请输入字体大小,可留空: px/pt/small:', '');

if (my_link != '') {

if (your_link != '') {

setSelection(e, '<font style="color:' + my_link + '; font-size:' + your_link + ';">'+ str + '</font>');

}

else {

setSelection(e, '<font color="' + my_link + '">' + str + '</font>');

}

}

else {

if (your_link != '') {

setSelection(e, '<font style="font-size:' + your_link + ';">'+ str + '</font>');

}

}

return false;

}



function insertAlign (e) {

if (!canFormat) return;

var str = getSelected(e);

if (!str) return;

var my_link = prompt('Choose the text alignment: left/right/center', 'center');

if (my_link != null) {

setSelection(e, '<p align="' + my_link + '">' + str + '</p>');

}

return false;

}



function insertFlash(e) {

if (!canFormat) return;

var str = getSelected(e);

if (!str) return;

setSelection(e, '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="200"><param name="movie" value="' + str + '"><param name="quality" value="high"> <embed src="' + str + '" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="200"> </embed></object>');

return false;

}



function insertMedia(e) {

if (!canFormat) return;

var str = getSelected(e);

if (!str) return;

setSelection(e, '<object classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width="330" height="60"><param name="autostart" value="0"><param name="src" value="' + str + '"><param name="controls" value="statusbar,controlpanel"><embed src="' + str + '"> </embed></object>');

return false;

}

这是增加几个按钮功能的JS函数，并且考虑了IE和Firefox等多种浏览器，能够做到完全兼容。

添加完毕后，请将mt.js转换成UTF-8格式。如果不想转换，将上述函数中的中文改为英文也可以。

接下来，打开MT程序tmpl\cms\下的edit_entry.tmpl文件，查找第一个“<div class="field-buttons">”，将它下面的将“<div class="field-buttons">”与下一个</div>之间的所有内容换为：

<script type="text/javascript">

<!--

if (canFormat) {

with (document) {

write('<a title="<MT_TRANS phrase="Bold" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="Italic" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="Italic" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="Underline" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-underline.gif" alt="<MT_TRANS phrase="Underline" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="Strikesout" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'s\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/strikesout-button.gif" alt="<MT_TRANS phrase="Strikesout" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Alignment" escape="singlequotes">" href="#" onclick="return insertAlign(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/align-button.gif" alt="<MT_TRANS phrase="Alignment" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Font Color/Size" escape="singlequotes">" href="#" onclick="return insertFont(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/font-color-size.gif" alt="<MT_TRANS phrase="Font Color/Size" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Encode HTML" escape="singlequotes">" href="javascript:decodeIt(document.entry_form.text)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/code-button.gif" alt="<MT_TRANS phrase="Encode HTML" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Insert Image" escape="singlequotes">" href="javascript:InsertImage(document.entry_form.text)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/img-button.gif" alt="<MT_TRANS phrase="Insert Image" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Inster Media" escape="singlequotes">" href="#" onclick="return insertMedia(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-media.gif" alt="<MT_TRANS phrase="Insert Media" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Inster Flash" escape="singlequotes">" href="#" onclick="return insertFlash(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-flash.gif" alt="<MT_TRANS phrase="Insert Flash" escape="singlequotes">" width="22" height="16" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Insert Link" escape="singlequotes">" href="#" onclick="return insertLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-link.gif" alt="<MT_TRANS phrase="Insert Link" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="Insert Email Link" escape="singlequotes">" href="#" onclick="return insertLink(document.entry_form.text, 1)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-email.gif" alt="<MT_TRANS phrase="Insert Email Link" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="List item" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'li\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-list.gif" alt="<MT_TRANS phrase="List item" escape="singlequotes">" width="22" height="16" /></a>');

write('<a title="<MT_TRANS phrase="Quote" escape="singlequotes">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote" escape="singlequotes">" width="22" height="16" /></a>');

}

}

<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" border="0" /></a>');

}

}

</TMPL_IF>

// -->

</script>

然后再接着查找“<div class="field-buttons">”，同样用上述内容替换，不过要将其中的“document.entry_form.text”全部更换为“document.entry_form.text_more”。

最后上传按钮图片，即完成修改。

为方便大家，这里提供我修改好的mt.js、edit_entry.tmpl以及所制作的图片：Download file