Web 编辑器与所见即所得（WYSIWYG）
发表于 2007年03月19日 11:18 PM @ 分类：用户体验及交互设计
对于众多 Blogger 来说，编辑器一直是令人头疼的问题。偏技术一些的 Blogger 会觉得 Web 编辑器生成的代码很混乱和无效；非技术一些的 Blogger 也往往觉得编辑器用地很不得心应手。
所见即所得是编辑器最基本的要求
所见即所得，即你在编辑器里面看到的，最后将会以一致的样式输出。无论是打印输出还是屏幕输出、HTML 输出。
作为一个编辑器，所见即所得应该是最基本的要求。设想一下，如果 Microsoft Word 编辑环境下的文章，打印出来却完全不同，那使用者会怎么想？Web 编辑器也是一样，所见即所得是最基本的要求。
那些宣称自己是所见即所得的 Web 编辑器，简直惊人的可笑（当然我们并不否认他们在这方面所作出的尝试和贡献）。好比一条鱼在说，看呐，我能在水里游。
所操作即所得
相对于所见即所得，更重要的应该是所操作即所得。以用户操作（目标）为中心。我举几个例子。
首先我个人是一个 Web Standards 推广者。我强烈的希望用户按下回车后产生一个段落、一个 <p>，而不是一个 <br /> 或者 <br>。但是作为普通用户，不会关心后面产生的是什么 HTML 代码。如果他需要段后空一行（这里的段，是文档结构上的段，不是 HTML 的 <p>），那么只要多按两下回车就可以了。
很多编辑器是这样处理的：
- 按下回车产生一个
<p>标签，同时视觉上与上一段末空了一行； - 按下 Shift + 回车产生一个
<br />标签，也就是所谓软回车； - 按下回车只会产生
<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。
评论
就编辑器与站点样式冲突的问题，对于某些高档编辑器来说似乎不是问题——比如MCE或者FCK Editor，他们可以读入网站本身的样式（或者是预置一些特定样式）。
2007年03月20日 08:46
“Markdown之类的语法”好像听上去挺不错，期待能看到相关介绍...^0^
2007年03月20日 09:21
Markdown之类的语法——我只知道Textile
像MT后台这种编辑器其实也不错啦
其实一切都是“习惯就好”
2007年03月20日 18:58
@dimlau: 因为我不太清楚 Markdown 是属于 Textile 一种还是与 Textile 平行的一种 Txt2HTML 的语法和转换程序。我比较喜欢和推荐 Markdown 的语法，Textile 还不够简单。
@沈蚊: 对，是可以。不过很少有人那么去做。
2007年03月21日 09:47
你好：希望交换个链接
LUSIN BLOG
http://www.lusin.cn/blog
好运！
2007年03月21日 18:09
好稿子，好内容。。。
2007年03月21日 22:38
呵呵~~曾经也研究过这个问题，到底是还是最终也没有一个合适的答案，不过我是觉得应该用更好，对于编辑器来说我一直都是比较喜欢ubb的，功能简单，而且效率很高，毕竟一般用于web发表文章不会做很复杂的排版。
2007年03月22日 10:15
@lusin: 链接已加 :)
2007年03月22日 13:15
多谢：）
好运！
2007年03月23日 18:03
您好!
偶然读到您的这篇文章
最近我在百度开始使用blog
然而却一直受段落间无法空行所困扰
每每在编辑过程中所预设的空行
到了发表刊出后都消失了
我想请教您是否有办法解决此问题呢?
我曾试过在语法上加上<br /> 或<p>
但是都没有效用呢
希望能得到您的帮助
谢谢您
2007年03月26日 13:37
好久没有光顾，确实所见即所得的web开发工具和众多的内容发布系统都在强奸者W3C和web标准s，今天我也遇到了一件PM和Team leader对页面制作人员不同的要求，导致页面制作人员很无奈和彷徨。
PM需要的是效率和抢先占领市场，Team Leader自然需要我们的产品在技术上很严格和优秀，易于维护和管理。
Table在众多PM的催促下依然生命力旺盛。
也就是说，道理大家都明白，可是做起来总有那么多的磕磕绊绊让你很无奈。众多的所见即所得编辑器估计也是为了整个系统的优良和发布的迅速而忽视这个看似没有必要的编辑器。
2007年03月27日 21:18
呵呵，学习了，那你认为目前比较好的web编辑器是什么呢？
2007年04月20日 11:46
比较好的，针对新手和中端用户，我用过的也只有 TinyMCE 了。针对高级用户，我觉得 textarea + Markdown 是不错的选择。
即使是 Google Docs 的编辑器，也不可避免的有很多乱代码（可能是由于 writely 的迁移导致）。
2007年04月20日 15:51
@greengnn: 质量战略和时间战略的问题，可以参考一些理论著作，比如生产运作管理，有一些部分的解决方案和例子。
@星之永恆: 百度空间的编辑器我没有用过，也不知道如何。
2007年04月20日 15:54
我刚才搜了一下，你这篇文章竞被人转载了几百次，牛人，呵呵
2007年05月27日 17:10
正在找一款所见即得工具
我的wp要好好整整了
2007年07月16日 13:24
CR回车 LF换行 原文里搞反了
2007年09月03日 00:06
@tz 已更正，多谢指出 :)
2007年09月03日 09:21
不知道用html代码，如何换两行，在html页面中，连续用回车是不能换行的，连续用也无法换两行，也就是中间空一行。
2007年09月22日 18:39