Snow and Bodhi | 雪与菩提

前不久，为了提高后台速度我禁用了可视化编辑器 TinyMCE，但是仅有的 Quicktags 编辑器功能稍显薄弱。在网上搜寻一番后总结一下自定制 Quicktags 编辑器按钮的方法，并为大家介绍原作者最近推出的升级版 JS Quicktags！

修改 Quicktags 按钮

Quicktags 是一款基于 Javascript 的在线编辑器，其所有代码都存储在“quicktags.js”（../wp-includes/js/quicktags.js）文件中。
首先备份原有的 quicktags.js。
分析源代码可得，添加按钮的函数为“edButton”，函数定义为：

function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id; // 按钮所在input对象的id，不可为空；
this.display = display; // 按钮所显示的文字，不可为空；
this.tagStart = tagStart; // 起始标签，可为空；
this.tagEnd = tagEnd; // 结束标签，可为空
this.access = access; // 如不需要额外的按钮“/close”进行闭合，-1
this.open = open; // 如不需要额外的按钮“/close”进行闭合，-1
}

Quicktags 按钮操作分三类：

1. 普通按钮：点击按钮插入起始标签，输入内容，点击原按钮/close按钮闭合标签；
2. 普通按钮：选定内容，点击按钮自动插入其实标签和结束标签；
3. 高等按钮：无论使用以上哪种方法插入标签，自动弹出窗口提示输入参数值，如填写图像的地址和描述。

普通按钮如：标题（<h1>-<h6>）、粗体（<strong></strong>）、有序列表（<ol><li></li><ol/>）等；
高等标签如：图像（<img … />
）、链接（…）、Footnote脚注标签（稍后介绍）。
如果添加普通标签，可以参照粗体按钮代码：

edButtons.push(
new edButton(
‘ed_bold’
,’B’
,’‘
,’‘
,’b’
)
);

如果添加高等按钮，可以参照超级链接按钮代码：

edButtons.push(
new edButton(
‘ed_link’
,’Link’
,”
,’‘
,’a’
)
); // special case
…
function edInsertLink(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = ‘http://’;
}
if (!edCheckOpenTags(i)) {
var URL = prompt(’Enter the URL’ ,defaultValue);
if (URL) {
edButtons[i].tagStart = ‘‘;
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}

访问了原作者Alexking的Blog之后，我找到了 JS Quciktags Editor 最新版（版本号：1.2）。除了代码的优化之外，作者丰富了可用标签，值得提及的是“Footnote”按钮。
Footnote 可以在光标处插入上角标（如：WordPress^[1]是一种Blog^[2]文章发布系统。），并且链接到文末的条目，这是对 HTML 语言中锚点的应用。对于严谨的博客文章排版者来说这是一个很便捷的功能。虽然 Footnote 并不能完成自动排序、排序纠错之类的复杂功能，但是我们又能对一款定位为“快速、轻量级”的编辑器苛求多少呢。

1. [1] [back]WordPress是一种使用PHP语言和MySQL数据库开发的开源、免费的Blog(博客,网志)引擎,用户可以在支持PHP和MySQL数据库的服务器上建立自己的Blog.
   WordPress是一个功能非常强大的博客系统,插件众多,易于扩充功能.安装和使用都非常方便.目前WordPress已经成为主流的Blog搭建平台.
2. [2] [back]blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。