WYSIWYF：一枚WYSIWYG编辑器

WYSIWYF（what you see is what you f**k）是我好几个月前和同学一起写的一枚 JavaScript所见即所得编辑器。功能十分简陋。

缘起

某一次在学校某社团的数据库里，我发现一篇短短的文章居然撑爆了MySQL的text型的65535字节长度限制。仔细一看，原来是因为前台使用了KindEditor作为所见即所得编辑器，它在Chrome下生成的HTML长得令人发指。

现有的WYSIWYG编辑器生成的HTML代码实在太长。很多WYSIWYG编辑器在一些浏览器下甚至会生成这样的HTML：


（图片摘自卢松松博客）

无奈之下，只能自己写一个WYSIWYG编辑器以供自己使用。

Demo

This is a <i>simple</i> <b>demo</b> of WYSIWY<span style="color: #F00;">F</span> editor. Don't try to click on the smiley face. It has no use at all.

性能测试

当时写出WYSIWYF时，测试表现比其它主流WYSIWYG编辑器好得多。而现在编辑器和浏览器都有了优化，优势已经不那么明显，但是细节上依然能体现。

今天我在Chrome下做了一下测试，将WYSIWYF与几个已经优化得不错的编辑器做对比：
输入“test_of_the_wysiwyg_editor”
操作时按顺序将将“te”加粗、“st”加粗、“wysi”设为斜体、“iwyg”设为红色、“g_e”背景设为黄色。

不同编辑器给出以下HTML（为公平对比，我将所有<b><i>替换为<strong>、<em>，将rgb(0,0,0)形式的颜色全部替换为hex形式）：

TinyMCE:
<strong>test</strong>_of_the_<em>wys<span style="color: #ff0000;">i</span></em><span style="color: #ff0000;">wy<span style="background-color: #ffff00;">g</span></span><span style="background-color: #ffff00;">_e</span>ditor

百度UEditor:
<strong>te</strong><strong>st</strong>_of_the_<em>wys<span style="color: #ff0000; ">i</span></em><span style="color: #ff0000; ">wy<span style="color: #ff0000; background-color: #ffff00; ">g</span></span><span style="background-color: #ffff00; ">_e</span>ditor

KindEditor:
<strong>te</strong><strong>st</strong>_of_the_<em>wys<span style="color:#ff0000;">i</span></em><span style="color:#ff0000;">wy<span style="background-color:#ffff00;">g</span></span><span style="background-color:#ffff00;">_e</span>ditor

WYSIWYF:
<strong>test</strong>_of_the_<em>wys</em><span style="color:#ff0000"><em>i</em>wy</span><span style="background-color:#ffff00"><span style="color:#ff0000">g</span>_e</span>ditor

WYSIWYF生成的HTML长度上明显短于其它所有编辑器。

除了WYSIWYF和WordPress所使用的TinyMCE将两个加粗标签合并了之外，其它的两个编辑器都没有把连续的<strong>合并。在后面存在标签交叉的段落，三个商业化的编辑器都不如WYSIWYF处理得简洁。

补充说明

WYSIWYF是在学期中闲着没事的时候写成的，花在上面的时间很少，从开始到结束也就一星期。况且也只为自己使用，所以功能简陋，也不打算进行扩展。写的过程中参考了自製WYSIWYG RichEditor 探討一文。

使用/源码：

经过测试，WYSIWYF在Chrome、IE6~9、Firefox 4、Safari以及Opera下工作良好（兼容坑爹的IE6费了不少时间啊）。

WYSIWYF使用简单：
首先先载入http://ihome.ust.hk/~xkong/home/wysiwyf.js。
然后直接将原textarea呈递给WYSIWYF.add函数。可以根据原textarea、原textarea的name或原textarea的id进行调用。

WYSIWYF.add('name','element_name');

WYSIWYF.add('id','element_id');

WYSIWYF.add('el',document.getElementsByTagName('textarea')[0]);

源码可自行打开查看，结构清楚附有少量注释。