WYSIWYF:一枚WYSIWYG编辑器

Filed in IT , 互联网 4 comments

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

缘起

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

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


(图片摘自卢松松博客

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

Demo

性能测试

当时写出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]);

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

2012 07 03 4 comments
Tags: , ,
评论列表
#1 聂皓 :

表示看不懂啊!!!

#2 kmxz :

@聂皓
只是点JavaScript雕虫小技……

可以啊

#4 congnoPt :

skachat fifa 15, скачать фифа 15 демо на пк или скачать fifa 15 карьера

发表评论
名字

Email

网址

Delighted Black designed by Christian Myspace In conjunction with Ping Services   |   French Teacher Jobs   |   Maths Teacher Jobs