自己Hack了一下MT3.1的文字编辑区的功能按钮 (Kreny's Blog)

看了qinyu的【Hack-MT】增加文字编辑区的功能按钮，我自己也有蠢蠢欲动了。下载了qinyu的hack文件，发现这个是针对非3.0版本的，于是使用了他的几个不错的javascript function，对 Version 3.121 的MT的文字编辑区进行了修改。其中formatStyleStr 是修改了MT自带的功能 formatStr 而新建立的，其余function 都从qinyu中提取,一些图片是从，因为我还有一个Nucleus的blog，而且使用地非常顺手。先看看成果吧～

新增加了 Flash 和 Realpalyer(media files) 的嵌入。

你可以在这里下载我修改的edit_entry for MT3.0D.

2004.12.8 添加了edit_entry for MT3.121 版本。

2004.12.15 添加了<li> 按钮。

2004.12.23 修改了对 FireFox 支持的 Javascript。(但是在 firefox 中的第二个“额外文章内容”中，按钮都会变得无效，包括原版本的 Mail link 和 Url link。)

2004.12.29 升级 MT 到 3.14，更新了 edit_entry for MT3.14 (下载),使得支持 Firefox 的 javascript。

Step 1
在 edit_entry.tmpl 中的顶端找到以下内容：

<TMPL_INCLUDE NAME="header.tmpl">

<div id="edit-entry">

<script type="text/javascript">
<!--

在其后面添加以下的 function 到 edit_entry.tmpl 中。(建议统一放在文档最前面或者mt.js中。以下版本已经为 firefox 作了改进。)

function formatStyleStr (e, v, s) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
setSelection(e, '<' + v + ' class=' + s + '>' + str + '</' + v + '>');
return false;
}

function insertFlash(e) {
if (!canFormat) return;
var str = getSelection(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=470 height=232><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=470 height=232> </embed></object>');
return false;
}

function insertMedia(e) {
if (!canFormat) return;
var str = getSelection(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;
}

function insertCode(e) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
str = str.replace(new RegExp("&","g"), "&");
str = str.replace(new RegExp("<","g"), "<");
str = str.replace(new RegExp(">","g"), ">");
setSelection(e, str)
return false;
}

function insertColor(e) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
var my_link = prompt('Choose the colors: red/blue/green/brown/:', 'red');
if (my_link != null)
setSelection(e, '<font color="' + my_link + '">' + str + '</font>');
return false;
}

function insertImg(e) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
var img_align = prompt('Choose the position: middle? right? left?:', 'middle');
if (img_align != null)
setSelection(e, '<img src="' + str + '" align="' + img_align + '">');
return false;
}

Step 2
在你的 edit_entry.tmpl 找到以下内容：(大约在179行上下,红色部分是为 firefox 作的改变。)

<script type="text/javascript">
<!--
if (canFormat) {
with (document) {

添加以下内容：

write('<a title="<MT_TRANS phrase="Inster Media">" href="#" onclick="return insertMedia(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/media-button.gif" alt="<MT_TRANS phrase="InsertMedia">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Inster Flash">" href="#" onclick="return insertFlash(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/flash-button.gif" alt="<MT_TRANS phrase="InsertFlash">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Code Style">" href="#" onclick="return formatStyleStr(document.entry_form.text,\'div\',\'code\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/code-button.gif" alt="<MT_TRANS phrase="CodeStyle">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Leftbox">" href="#" onclick="return formatStyleStr(document.entry_form.text,\'div\',\'leftbox\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/button-left.gif" alt="<MT_TRANS phrase="Leftbox">" width="16" height="16" border="0" hspace="3" /></a>');

write('<a title="<MT_TRANS phrase="Rightbox">" href="#" onclick="return formatStyleStr(document.entry_form.text,\'div\',\'rightbox\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/button-right.gif" alt="<MT_TRANS phrase="rightbox">" width="16" height="16" border="0" hspace="3" /></a>');

write('<a title="<MT_TRANS phrase="Image">" href="#" onclick="return insertImg(document.entry_form.text,\'div\',\'code\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/img-button.gif" alt="<MT_TRANS phrase="Image">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="TransferCode">" href="#" onclick="return insertCode(document.entry_form.text,\'div\',\'code\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/trans-button.gif" alt="<MT_TRANS phrase="TransferCode">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Color">" href="#" onclick="return insertColer(document.entry_form.text,\'div\',\'code\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/color-button.gif" alt="<MT_TRANS phrase="Color">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Center">" href="#" onclick="return formatStr(document.entry_form.text, \'center\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/center-button.gif" alt="<MT_TRANS phrase="Center">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="Blockquote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/quote-button.gif" alt="<MT_TRANS phrase="Blockquote">" width="24" height="18" border="0" /></a>');

write('<a title="<MT_TRANS phrase="StrikeSout">" 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">" width="24" height="18" border="0" /></a>');

278行处替换所有的 write 行为：(注意红色部分的区别)

write('<a title="<MT_TRANS phrase="Inster Media">" href="#" onclick="return insertMedia(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/media-button.gif" alt="<MT_TRANS phrase="InsertMedia">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Inster Flash">" href="#" onclick="return insertFlash(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/flash-button.gif" alt="<MT_TRANS phrase="InsertFlash">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Code Style">" href="#" onclick="return formatStyleStr(document.entry_form.text_more,\'blockquote\',\'code\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/code-button.gif" alt="<MT_TRANS phrase="CodeStyle">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Leftbox">" href="#" onclick="return formatStyleStr(document.entry_form.text_more,\'div\',\'leftbox\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/button-left.gif" alt="<MT_TRANS phrase="Leftbox">" width="16" height="16" border="0" hspace="3" /></a>');
write('<a title="<MT_TRANS phrase="Rightbox">" href="#" onclick="return formatStyleStr(document.entry_form.text_more,\'div\',\'rightbox\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/button-right.gif" alt="<MT_TRANS phrase="rightbox">" width="16" height="16" border="0" hspace="3" /></a>');
write('<a title="<MT_TRANS phrase="Image">" href="#" onclick="return insertImg(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/img-button.gif" alt="<MT_TRANS phrase="Image">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="TransferCode">" href="#" onclick="return insertCode(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/trans-button.gif" alt="<MT_TRANS phrase="TransferCode">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Color">" href="#" onclick="return insertColor(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/color-button.gif" alt="<MT_TRANS phrase="Color">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Center">" href="#" onclick="return formatStr(document.entry_form.text_more, \'center\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/center-button.gif" alt="<MT_TRANS phrase="Center">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Li">" href="#" onclick="return formatStr(document.entry_form.text_more, \'li\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/list.gif" alt="<MT_TRANS phrase="List">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="StrikeSout">" href="#" onclick="return formatStr(document.entry_form.text_more, \'s\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/strikesout-button.gif" alt="<MT_TRANS phrase="StrikeSout">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text_more, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.entry_form.text_more, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.entry_form.text_more, \'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Insert Email Link">" href="#" onclick="return insertLink(document.entry_form.text_more, 1)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-email.gif" alt="<MT_TRANS phrase="Insert Email Link">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');

Step 3
修改你的 styles-site.css 以下仅为参考

.content blockquote {
background: #EEEEEE;
border: solid 1px #D1D7DC;
padding: 1px;
line-height: 150%;
padding: 3px;
}
.content .code {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 11px;
color: #006600;
background-color: #FAFAFA;
border: solid #D1D7DC 1px;
line-height: 150%;
margin: 35px;
padding: 3px;
}
.content pre,.quote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #444444;
line-height: 125%;
background-color: #FAFAFA;
border: #D1D7DC 1px solid;
margin: 35px;
padding: 3px;
}
.leftbox {
margin: 3px;
padding: 3px;
font-size: larger;
width: 20%;
float: left;
border-right: 3px solid #ccc;
}
.rightbox {
margin: 3px;
padding: 3px;
font-size: larger;
width: 20%;
float: right;
border-left: 3px solid #ccc;
}
img {
border: none;
margin: 3px;
padding: 3px;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
}

好了～～最后演示一下吧～

这个是代码
function formatStr (e, v) { if (!canFormat) return; var str = getSelection(e); if (!str) return; setSelection(e, '<' + v + '>' + str + '</' + v + '>'); return false; }
这个是html代码
<tr> <td><img src="<TMPL_VAR NAME=STATIC_URI>images/spacer.gif" width="1" height="10"></td> </tr>
颜色有红色棕色黄蓝绿色 <----- 居中对齐了 ----->
引用一下
~~不要的文字~~ 重点内容加粗
图片居左效果

Movable Type 是一套以网页为基础的个人出版系统，被设计来降低维护定期更新的新闻或杂志网站的难度；例如网志就是其中一项利用。它不但包含了许多其它此类系统兼具的常见功能（像是能够架设在你自己的服务器上、模版驱动环境、相当具有可组态性、静态链结等），还支持很多功能。Movable Type 系统本身就支持多重网志的功能。你可以把每一个单独的网志看做是一些文章项目、模版和其它你在网志编辑选单里可以看到的东西的集合。

图片居右效果

Movable Type 是一套以网页为基础的个人出版系统，被设计来降低维护定期更新的新闻或杂志网站的难度；例如网志就是其中一项利用。它不但包含了许多其它此类系统兼具的常见功能（像是能够架设在你自己的服务器上、模版驱动环境、相当具有可组态性、静态链结等），还支持很多功能。Movable Type 系统本身就支持多重网志的功能。你可以把每一个单独的网志看做是一些文章项目、模版和其它你在网志编辑选单里可以看到的东西的集合。

好了～也祝大家快快拥有自己喜欢的写作板！

参考：
贴歌曲的code
贴flash的code

评论 (4 条)

Wintel:

Wintel
2004年09月14日 10:18

发表于 2004 年 09 月 14 日 10:18

.content .code {
}
这句什么意思？代表content和code还是content中的code???
还有.content pre,.quote 中间夹了“,”又是什么意思？
谢谢，email告诉小弟

Chris:

Chris
2004年09月14日 18:19

发表于 2004 年 09 月 14 日 18:19

多谢你的信息，我已经更新了网页。不过稍有些不对劲，我只把其中多出来的信息加进了edit_entry.tmpl中，包括几个函数和图标。因为我更新的时候发现我的edit界面乱了。

佐仔:

佐仔
2005年02月26日 06:43

发表于 2005 年 02 月 26 日 06:43

大GG，我按你的方法做了，就是不能显示HTML的代码，引用都没有问题，一般别的代码可以显示，就是引用不了HTML代码。我用代码按钮，引用按都等等都无法实现。
GG你可不可以帮我做一个呀，我没有装别的什么插件，GG你这个插件就是我的第一个了。希望可以帮忙，我的还是3。14版的

surain:

surain
2005年03月09日 11:42

发表于 2005 年 03 月 09 日 11:42

我的MT的文字编辑区的图标只有上传档案那个可以用，其它的点了之后都是什么都不出来啊.为什么呢?

发表评论

(如果您还为在此成功留言，也许是因为需要管理员逐一审核留言内容后放可看到您的评论。请稍后并感谢您的耐心等待。)

Name:

Email Address:

URL:

记住我的信息?

评论: (您可以使用 HTML 标签以表现风格)

Kreny's Blog

多锻炼身体，多健康身心; 培养一个爱好，坚持一个信念~~

2004 年 06 月 26 日

自己Hack了一下MT3.1的文字编辑区的功能按钮

引用

评论 (4 条)

发表评论