Skip navigation.

exploreopera

| Help

Sign up | Help

极湖

无不用其“极”

Posts tagged with "WYSIWYG"

利用 ContentEditable 做 WYSIWYG 编辑器

, ,

接下来要做的项目,需要在网页中实现一个拖方式的 WYSIWYG 编辑器,找了很多开源的基于 JavaScript 的编辑器,都难以实现复杂的拖放功能,因为它们几乎都是清一色使用 iframe 的 DesignMode="on" 属性,而跨 frame 的拖放非常困难,在网上很难找到现成的例子。

后来发现除了 Firefox 的其他浏览器,几乎都支持 div 的 ContentEditable="true" 属性,而 Firefox 3 也将支持该属性,所以决定用 div 做编辑器。刚开始觉得不难,然而一开始做就遇到不少难点,最主要是:

  • 输入焦点的控制
  • 光标位置的控制
  • 选取区域的控制

这几个问题不解决,很难做出令人满意的编辑器。因此,正在努力解决以上问题。

WYSIWYG 在线 HTML 编辑器收集

, ,

1. FCKeditor
老品牌,名气很大,功能很多,个头也很大,个人不是很喜欢。

2. TinyMCE
和 FCKeditor 齐名,名为"Tiny",实际上个头并不小,而且有向"Huge"发展的趋势。

3. Xinha
据其主页上的介绍,功能似乎很强大,其插件系统看起来不错。因为没用过,暂不置评。

4. widgEditor
个头很小,下载文件只有32k,我看了一下它的代码,感觉还不错,尽管功能稍欠,熟悉JavaScript的人应该可以自己将其扩充。

5. WMD
简单实用的在线编辑器。可惜不提供源代码下载。在自己的网页里面使用它需要注册。

6. WYMeditor
该编辑器做成 jQuery 的插件,这是其亮点,看了一下他的代码,感觉有些零乱,目录结构也不是很好。因个人很喜欢 jQuery,所以期待它做得更好。

7. Wikiwyg
这是 SocialText 采用的在线编辑器,双击网页的某一部分(div)就能使其进入编辑状态,这一点很方便。目前发现的问题是不支持 Opera。

8. WYSIWYG HTML control
一位英国人写的代码,个头很小,js文件才15k,看了一下其代码,比较清晰易懂,应该容易扩展,值得推荐。

9. crosseditor
一位日本人在 Prototype 库的基础上写的代码,非正式产品,其Sample代码可用来研究学习。

目前找到的就这些,网上还有很多类似的编辑器代码,青菜萝卜,各有所爱,自己挑喜欢的用吧。

这儿有一篇文章,教你怎样做 WYSIWYG HTML 编辑器,如果想自己做编辑器,读一读这篇文章肯定有好处。
July 2008
SMTWTFS
June 2008August 2008
12345
6789101112
13141516171819
20212223242526
2728293031