WordPress JS Quicktags 编辑器升级 >> Snow and Bodh...

WordPress JS Quicktags 编辑器升级

10. December 2007, 13:19WordPress PluginxBodhi

 

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

修改 Quicktags 按钮

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

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

Quicktags 按钮操作分三类：

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

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

1. edButtons.push(
2.     new edButton(
3.         'ed_bold'
4.         ,'B'
5.         ,'<strong>'
6.         ,'</strong>'
7.         ,'b'
8.     )
9. );

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

1. edButtons.push(
2.     new edButton(
3.         'ed_link'
4.         ,'Link'
5.         ,''
6.         ,'</a>'
7.         ,'a'
8.     )
9. ); // special case
10. ...
11. function edInsertLink(myField, i, defaultValue) {
12.     if (!defaultValue) {
13.         defaultValue = 'http://';
14.     }
15.     if (!edCheckOpenTags(i)) {
16.         var URL = prompt('Enter the URL' ,defaultValue);
17.         if (URL) {
18.             edButtons[i].tagStart = '<a href="' + URL + '">';
19.             edInsertTag(myField, i);
20.         }
21.     }
22.     else {
23.         edInsertTag(myField, i);
24.     }
25. }

注意：你也可以不使用所谓的高等按钮，直接插入一段代码后，手动填写诸如href、url、src、art、title 等参数值。例如我编写的“话题性插图按钮”，意在为一篇日志插入一幅的插图，自定义居左或者居右，自定义边距：

1. edButtons.push(
2.     new edButton(
3.         'ed_topicimg'
4.         ,'Top-img'
5.         ,'<img align="" style="margin:;"src="" alt="" />'
6.         ,''
7.         ,'m'
8.         ,-1
9.     )
10. ); // special case

升级版的 Quicktags

访问了原作者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的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。