Web 编辑器与所见即所得

Google Docs 和 TinyMCE 编辑器的部分截图

对于众多 Blogger 来说,编辑器一直是令人头疼的问题。偏技术一些的 Blogger 会觉得 Web 编辑器生成的代码很混乱和无效;非技术一些的 Blogger 也往往觉得编辑器用地很不得心应手。

所见即所得是编辑器最基本的要求

所见即所得,即你在编辑器里面看到的,最后将会以一致的样式输出。无论是打印输出还是屏幕输出、HTML 输出。

作为一个编辑器,所见即所得应该是最基本的要求。设想一下,如果 Microsoft Word 编辑环境下的文章,打印出来却完全不同,那使用者会怎么想?Web 编辑器也是一样,所见即所得是最基本的要求。

那些宣称自己是所见即所得的 Web 编辑器,简直惊人的可笑(当然我们并不否认他们在这方面所作出的尝试和贡献)。好比一条鱼在说,看呐,我能在水里游。

所操作即所得

相对于所见即所得,更重要的应该是所操作即所得。以用户操作(目标)为中心。我举几个例子。

首先我个人是一个 Web Standards 推广者。我强烈的希望用户按下回车后产生一个段落、一个 <p>,而不是一个 <br /> 或者 <br>。但是作为普通用户,不会关心后面产生的是什么 HTML 代码。如果他需要段后空一行(这里的段,是文档结构上的段,不是 HTML 的 <p>),那么只要多按两下回车就可以了。

很多编辑器是这样处理的:

  1. 按下回车产生一个 <p> 标签,同时视觉上与上一段末空了一行;
  2. 按下 Shift + 回车产生一个 <br /> 标签,也就是所谓软回车;
  3. 按下回车只会产生 <br />

回车、换行,换的是一行,如果一下换了两行岂不奇怪?古老的打字机在换行操作时也是只换一行,如果需要段后再空,那么重新拉一下就可以了。撇开 HTML 标准不谈,第三种方法反而是最符合用户操作的。把控制权交给了用户。

如果想要兼顾 HTML 标准和用户操作,那么我的建议是当用户在段末按了两下回车后,自动辨认上文为一个 <p>,并且给 <p> 设定 margin-bottom: 1em; 这样的样式。

再举一个 headings 的例子。在 HTML 里面其实 headings 是相对的。比如用户在 Blog 编辑器里面写了 h1-h3,当发布日志的时候,就会发现这 h1-h3 其实和 Blog 模版冲突的很厉害。而且往往 headings 在编辑器里面的样式与发布后在模版里的样式截然不同,因为用的两套样式表。

Markdown之类的语法

我一直使用 Markdown 语法书写 Blog。Markdown 是一套简单高效的语法,比如使用“**加粗**”就可以实现“加粗”的效果。它比 HTML 简单、容易理解。使用者将看不到 <p><br> 之类的代码,也不用为这些心烦。所有的格式基于文本生成。

技术为人服务,而不是相反

编辑器应该有能力做到足够智能,来完成文档的结构化和最终表现。这又让我想起另外一个问题,我大学同学毕业论文主题是 SEO,当时导师问,你这个搜索引擎优化,是搜索引擎为你的网站优化,还是你的网站为搜索引擎优化?按常人理解,SEO 往往是网站主的工作而不是搜索引擎。这常常被我们拿来“嘲笑”那个导师。

其实仔细想想,你敢确定目前大家所作的 SEO 就是应该的吗?难道不正应该搜索引擎为更好的索引内容来优化自己的算法?居然还要网站根据搜索引擎的需要去更改内容、结构?这是技术的进步还是倒退?

当然,也部分得益于搜索引擎,越来越多人重视结构化、语义话和 Web 标准。这是好事。

补充:关于换行(carriage return)和回车(line feed)

在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符。但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符。要是在这0.2秒里面,又有新的字符传过来,那么这个字符将丢失。

于是,研制人员想了个办法解决这个问题,就是在每行后面加两个表示结束的字符。一个叫做“回车”,告诉打字机把打印头定位在左边界;另一个叫做“换行”,告诉打字机把纸向下移一行。

这就是“换行”和“回车”的来历,从它们的英语名字上也可以看出一二。

终于发现,这里出现了研制人员这个词。看来这并不是用户需求(或期望),非常类似于程序员要改正一个 Bug。

 

Web 编辑器与所见即所得 本文结束

  [ 打印 ] [ 关闭 ]