WordPress文章编辑器折腾之路

Written by

in

WP编辑器

当我第一眼看到 WordPress 自带文章编辑器的时候呆若木鸡,连字体都无法调节的简陋编辑器对于一个小白来说实在过于残酷,于是乎就义无反顾的踏上了了寻找一个强大的第三方编辑器的漫漫长路。

俗话说工欲善其事,必先利其器,在写博客的这段不长的日子里,倒腾 WordPress 文章编辑器的时间可能比写文章的时间还要长,尝试过各类 WordPress 离线编辑工具到 Sublime text 这样的文本编辑工具,再到 DWZendstudio 等庞大的IDE环境。

一面也是我的前端编写能力的逐渐增长导致对于编辑器的需求也相应变化,另一方面其实是我的工具控的强迫症心理在作祟,矢志于寻找一个能满足我各种编写需求的、完美的 WP 文章编辑器,事实上到最后才发现远没有完美的编辑工具,只有最适合自己目前水平和能力的工具才是最好的。

在不断尝试使用各类编辑器的过程中,颇有些独孤求败练剑的历程,从弱冠之年使用过凌厉刚猛,无坚不摧的利剑到老年时使用的草木皆可伤人的木剑,我用过的编辑器也是从强大的 Windows Live Writer (WLM) 开始,到现在更着重于写作内容的提炼和灵感的激发,时机成熟后随处打开一个 Windows 自带的记事本就足够让我下笔如流水,也许这就是金庸笔下独孤求败无剑胜有剑的最高境界。

利刃无双 —— Zoundry Raven

金庸老先生在《神雕侠侣》中描述独孤求败剑冢中第一柄剑为:“凌厉刚猛,无坚不摧,弱冠前以之与河朔群雄争锋。”Zoundry Raven 作为我在2010年刚开始博客写作时使用的第一款博客编辑器正如这柄轻薄锋利的利刃,十分的顺手。

zoundry raven

相对于傻大笨粗的 WLM,Raven在具备强大编辑功能的前提下,最大的优点就是占用内存小,启动速度快,界面简约,而且 Raven 还发布有免安装的绿色 portable 版本,我一般安装在 Dropbox 之中即时同步,无论在公司还是在家,我都可以同步更新博客内容。

对于任何一个希望写博客又不愿意折腾代码的朋友,它都是一个非常好的选择,同时在本地写作后上传的一个好处就是能在本地留下备份,如果但它的缺点也是致命的,也是我后期放弃它的主要原因:

  • Raven自从2009年初更新1.0版取消beta并开源后就再没有发出新版本,估计以后也不会再升级更新;
  • Raven 的 Portable 表现一直不稳定,在某些情况下编辑会出现崩溃的情况,导致撰写内容的丢失;
  • HTML 和 CSS 代码编辑能力较弱,缺乏自动补全代码高亮提示等基础功能;
  • 离线工具必须上传后才能预览效果,有时候和本地效果不同的还需要调整,人为的增加一个环节,降低编辑效率;
  • 它只有 Windows 平台客户端,后期我转而使用 Mac 平台后只能放弃。

没过多久,我就开始寻找新的编辑工具。

紫微软剑 —— 在线编辑环境

随着对 WordPress 学习的逐步深入,开始发现自带的编辑器的诸多功能实际上是被默认屏蔽的,只需要对 Function.php 文件以及通过一些插件的组合,就可以实现和离线编辑器一样甚至更为强大的功能,同时编辑效率和体验也大为提高,索性就彻底抛弃离线编辑工具而投入在线编辑器的怀抱

(一)三大 WordPress 编辑插件的推荐:

首先我们需要安装编辑插件,扩展 WP 默认编辑器的各项功能

1. TinyMCE AdvancedTinyMCE ultimate
WP自带的编辑器的名字就叫 TinyMCE,只需要安装上述两个插件的其中一种就可以实现甚至比离线博客工具更为强大的编辑功能,如修改文章内容时的搜索和替换、支持为任何元素加入内嵌的 CSS 样式等等。
2. Kindeditor for WordPress
这是一款国人开发的简单高效、易于使用的编辑器,可以简单快速的插入代码等功能,更适合国人的编辑习惯。
kindeditor编辑器
3. CKEdition for WordPress
CKEdition 是另一款强大的 WP 编辑插件,它的前身就是 FCKEditor,一款老牌的知名编辑工具,号称是最好的在线编辑工具,访问它的官方网站可以看到它不仅仅是一款普通的 WP 插件而更像是一个编辑平台,其中内含许多组件(如CKfinder)可以和它组合成为一个强大的编辑环境,实现如代码高亮等高级功能。

(二)安装 WordPress 代码编辑器

WP编辑器除了可以通过按钮在可视化界面进行初级编辑,但我们具备一些 HTML 和 CSS 代码编写能力之后,我们更多的时候就需要在 “TEXT”(代码)模式进行编辑以实现更为强大的视觉效果。editor

但自带的代码编辑器功能十分简陋,不仅缺乏“撤销”等基础功能,而且缺乏代码高亮和层次功能使得密密麻麻的代码让人眼花。

下面我就推荐两款 WP 的代码编辑插件

Synchi

这是一款内置于 WP 的强大 IDE 工具,它不仅仅是一个 HTML 代码编辑器,更可以对主题、插件甚至是 Widget 界面进行编辑。
安装插件后你在文章编辑时切换到代码界面时,可以看到 HTML 和 CSS 代码都已实现高亮,代码之间的层次关系也更加漂亮,增设的一条工具栏可使代码编辑时产生撤销、查找和替换等功能,已经具备一些专业编辑工具的雏形。

WP Editor

它也是一款对类似 Synchi 功能的插件,可以对文章和主题进行代码扩展编辑、虽然功能不若 Synchi 那般强大,但其兼容性更好,在和一些 SyntaxHighlighter 代码高亮插件配套使用较少产生冲突。

安装完上述两类插件之后,使得编辑器在代码和可视化界面下都具备了强大的高级功能,几乎满足了我们各种需要,远超诸多离线编辑工具,但最大的问题就是这些编辑器插件的体积较大,严重影响着 WordPress 的运行速度和效率,让我本已安装了数十种插件而臃肿不堪的后台系统更是雪上加霜,因此尽管在线编辑环境非常完美,但也只能忍痛割爱,需求更轻量级的解决方案。

独孤求败的第二柄剑名曰“紫微软剑”,“三十岁前所用,误伤义士不祥,乃弃之深谷”,正如我对在线编辑插件组合的态度,功能异常强大,但是以加重系统负荷为代价,也只能将其放弃。

重剑无锋 —— Sublime Text + Emmmet

如果要同时达到编辑器的强大功能和 WP 的轻量化要求,就好比鱼和熊掌的选择,难以兼顾,若要实现轻量化只能在线下进行编辑以后上传,同时随着我对HTML和CSS的学习,大量代码函数的运用迫切的需要一款专业的文本编辑工具来降低重复的输入工作。

UltraEdit太老,Emacs太难,NotePad++太丑,DW太慢,我选择了最近比较火的 Sublime Text2,装上各类插件实现了代码补全、代码格式化等各种强大功能,在专业文本工具下输入的感觉和体验也是在线编辑器所无法比拟的,同时习惯于专业编辑器中书写也十分有助于以后编程的学习。

我在 ST 中完成最初的文字内容输入和HTML结构排版,然后复制到在线编辑器中,再加入图片等多媒体信息,调整完格式后进行发布,执行效率也并不差。

同时使用专业编辑工具的好处并不仅仅如此,我们现在在 ST 中安装一个书写 HTML和CSS 的神器—— Emmet(它的前身就是大名鼎鼎的 Zen Coding),它通过各种函数的使用,大大减少了对 HTML 代码输入的重复劳动力,迅速提升了编写效率。

例如,在 ST 中安装好 Emmet 插件后,需要定义一个div函数,只需要简单的输入:

#first

然后敲入一个 “TAB”键,就出现了:

<div id="first"></div>

怎样,很神奇吧,如果想了解更多的用法,请访问它的官方网站去学习用法。

剑冢上的第三只剑是一只不开刃且沉重无比的玄铁重剑,这也是杨过后来的佩剑,独孤求败称其为“重剑无锋,大巧不工无,四十岁前恃之横行天下”,这也恰恰是我对于 Sublime Text  Emmet 文本编辑组合的评价,看起来体积巨大,复杂难用,但熟悉用法掌握技巧之后却是一把无往不胜举世无双的利器,这也是我目前达到的阶段。

草木皆可伤人 —— 记事本

独孤求败剑冢里的第四柄剑也是最后一柄剑确实一把早已腐朽的木剑“四十岁后,不滞于物,草木竹石均可为剑”,意思是内功修为深厚之后并任何东西都可以成为自己的兵器。

一般只有菜鸟和小白们才会纠结于各种编辑工具和 IDE 的选择,所谓的高手常常说自己只用记事本就可以写代码了,我一直觉得这话里多少存在些水分,但我倒认为在博客的写作环境里,这倒是极为可能的。

博客的好坏,不在于格式的漂亮,图片的花哨,更重要的是其中的内容是否真正有助于读者,吸引读者的目光,浏览目前的几大牛博,都没有太多格式上的变化,但每个字里行间都传达出深刻的思想。

因此,写博文并不在于工具的好坏,还在于内容的提炼和传达,也许到最后,我真正需要的仅仅就是一个记事本而已。