发布淘宝开源编辑器 KISSY Editor 1.0.0

在 Web 编辑器领域，

 

CKEditor – 七年的专注，赢取的是王者风范。
TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。
Google Docs – 简单与复杂的权衡，2/8 原则的遵守者。只把 20% 核心功能做好做妙，需要魄力。
YUI RTE – 如果爱上你是场梦境，醒来后叫我如何继续使用？
NicEditor – 爱唐装的摇摆，还是牛仔的风采？这是位别致的女孩，很难让人爱或不爱。
百度/QQ/163/白社会编辑器 – 各具特色。

 

淘宝用过一个很古老的编辑器（至今宝贝发布页面还在用）。去年年底，换用过 YUI 编辑器（让人爱恨交加）。今年，祭出了 FCKEditor. 从纯功能上讲，FCK 是王者。但在国内互联网环境下，FCK 的文件有点大。针对淘宝的应用，FCK 的可定制性和扩展性，也有一定限制。

 

于是有了今天发布的淘宝开源编辑器：KISSY Editor, 已在 淘帮派 上线试用。

KISSY Editor 刚诞生，目前仅有基本功能。紧接着的二期里，将进一步完善基础架构和插件体系，并提供 Undo/Redo, 插入Flash, 表格编辑和预置模板等功能。

 

KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发，目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。如果你感兴趣，欢迎与我联系。

 

KISSY 是开源项目，基于 MIT 协议。无论是个人开发还是商业应用，都可以免费使用。

 

淘宝将会把更多的组件整理进 KISSY 库中。
我们的理念是：开源，才能卓越！
我们相信，KISSY 库中有你所需，分享能带给你价值。
同时，热心的你，任何一条简单的建议，
都能让 KISSY 变得更好，让淘宝变得更好，让整个互联网变得更好！

 

对于编辑器的开发感想，就不多说了，一图抵千言：

开发编辑器，有如行驶在荒漠中，容易失去信念与坚持。
需保有一道靓丽的红，有如此风景守候，前行才有力量。

 

对 KISSY 有任何建议，欢迎与我联系(lifesinger at gmail.com or follow lifesinger@twitter).
对现有组件功能的建议和 bug, 欢迎提交到 Issues List.

评论

60 楼 happy_txf 2010-06-28  

现在本地上传图片功能是不是还不能够兼容IE?我做了个测试，同一页面，FF没有问题，IE上传后前端显示出错。。

59 楼 cuixiping 2010-05-26  

看着挺爽的，但是BUG有点偏多。
最喜欢的是，楼主的DEMO页面里的那些链接。

58 楼 zctya 2010-04-21  

呵呵，这个编辑器，还是有BUG的

57 楼 yifeng 2010-04-17  

请问LZ，“editor-aio.js、editor-min.js”
是通过什么工具做到的？
我Out了

56 楼 gking521 2010-03-31  

插入图片时有个bug,如果焦点不在编辑框里图片就不会正确的插入编辑框内，插入的是网页其他部分

55 楼 ma860709 2010-03-29  

楼主，你给的链接怎么现在没的下载的？

54 楼 ch_space 2009-12-14  

ch_space 写道

h521999 写道

非常感谢lifesinger,问题终于解决了，哎，真不应该,之所以出现问题是我把Content-Type设置成了"text/plain"，当把Content-Type设置成"text/html"后一切正常,没问题了.

你好，请问上传文件时后台获取文件时的parameter是什么？
也就是我们平时在form里：
<input type="file" name="xxx"/>

这个xxx在后台是什么？是imgFile吗？
谢谢！

呵呵，搞定了，谢谢！
提醒同学们一下：在后台接受文件时参数是imgFile，另外注意Content-Type设置为text/html。

53 楼 ch_space 2009-12-14  

h521999 写道

非常感谢lifesinger,问题终于解决了，哎，真不应该,之所以出现问题是我把Content-Type设置成了"text/plain"，当把Content-Type设置成"text/html"后一切正常,没问题了.

你好，请问上传文件时后台获取文件时的parameter是什么？
也就是我们平时在form里：
<input type="file" name="xxx"/>

这个xxx在后台是什么？是imgFile吗？
谢谢！

52 楼 h521999 2009-11-19  

非常感谢lifesinger,问题终于解决了，哎，真不应该,之所以出现问题是我把Content-Type设置成了"text/plain"，当把Content-Type设置成"text/html"后一切正常,没问题了.

51 楼 lifesinger 2009-11-19  

<p>初始化代码没问题，检查下 返回的 RAW DATA，应该和下面差不多：</p>
<p> </p>
<pre name="code" class="java">HTTP/1.1 200 OK
Date: Thu, 19 Nov 2009 13:14:21 GMT
Server: Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color PHP/5.2.8 mod_perl/2.0.4 Perl/v5.10.0
X-Powered-By: PHP/5.2.8
Content-Length: 47
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html

{"status": "0", "imgUrl": "path/to/img"}
</pre>
<p> </p>
<p>注意 Content-Type</p>

50 楼 h521999 2009-11-19  

<div class="quote_title">lifesinger 写道</div>
<div class="quote_div">直接将 actionUrl 放浏览器里，查看源码，看是否有 pre<br>或者用 Firebug 或 Fiddler 工具监控下返回的 raw 数据</div>
<p> </p>
<p>   我通过Firebug调试之后，D.responseText的值确实是加了多加&lt;pre&gt;&lt;/pre&gt;标签;但是我再用一个普通的页面进行测试时，同样是调用后台那段程序，但所获得的值却是正常的（没有多加&lt;pre&gt;&lt;/pre&gt;标签的）从而证明后台程序是没问题的，但不知道是不是我在初始化KISSY.Editor时，pluginsConfig对象哪里没有设置还是什么问题？我是这样初始化的:</p>
<pre name="code" class="js">&lt;script type="text/javascript"&gt;
     KISSY.Editor("demo", {
         pluginsConfig: {
             image: {
                 tabs: ["local", "link"], //"album"],
                 upload: {
                     actionUrl : "ckeditor-image-upload!kissy.action"
                 }
             },
             smiley: {
                 tabs: ["wangwang"]
             }
         }
     });
&lt;/script&gt;</pre>
 
<p> </p>
<p> </p>

49 楼 lifesinger 2009-11-19  

直接将 actionUrl 放浏览器里，查看源码，看是否有 pre
或者用 Firebug 或 Fiddler 工具监控下返回的 raw 数据

48 楼 h521999 2009-11-19  

<div class="quote_title">lifesinger 写道</div>
<div class="quote_div">从错误信息里看：<br><br>o = {tId =&gt; 0, argument =&gt; , responseText =&gt; &lt;pre&gt;["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]&lt;/pre&gt;, responseXML =&gt; {}}  <br><br>你返回的是：<br>&lt;pre&gt;["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]&lt;/pre&gt;<br><br>需要去掉 pre</div>
<p><br><br>我再次检查了一下程序，后台action中所返回的数据["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"],没有加入&lt;pre&gt;&lt;/pre&gt;标签啊，我是这样输出的：</p>
<pre name="code" class="java">String content= "[\"0\",\"http://localhost:8080/send-mail/fileUpload/20091118234056.jpg\"]";
response.getWriter().write(content);
response.getWriter().flush();</pre>
 
<p>怎么返回到前台会变成 &lt;pre&gt;["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]&lt;/pre&gt;呢？不解?<img src="/images/smiles/icon_surprised.gif" alt=""></p>

47 楼 lifesinger 2009-11-19  

从错误信息里看：

o = {tId => 0, argument => , responseText => <pre>["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]</pre>, responseXML => {}} 

你返回的是：
<pre>["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]</pre>

需要去掉 pre

46 楼 h521999 2009-11-18  

<p><br>下载下来试用了一下，在使用图片上传功能过程之中，当上传完图片时（后台文件是上传成功的）页面会弹出以下警告：</p>
<p> </p>
<p> </p>
<pre name="code" class="js">对不起，上传文件时发生了错误：

{message =&gt; JSON.parse, fileName =&gt; http://localhost:8080/send-mail/kissyEditor/editor-aio.js, lineNumber =&gt; 2519, stack =&gt; ("&lt;pre&gt;[\"0\",\"http://localhost:8080/send-mail/fileUpload/20091118234056.jpg\"]&lt;/pre&gt;")@http://localhost:8080/send-mail/kissyEditor/editor-aio.js:2519
([object Object])@http://localhost:8080/send-mail/kissyEditor/editor-aio.js:5030
([object Event],(void 0))@http://localhost:8080/send-mail/kissyEditor/editor-aio.js:3239
([object Event])@http://localhost:8080/send-mail/kissyEditor/editor-aio.js:1654
}
o = {tId =&gt; 0, argument =&gt; , responseText =&gt; &lt;pre&gt;["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"]&lt;/pre&gt;, responseXML =&gt; {}}
[from upload catch code]</pre>
<div class="quote_title">lifesinger 写道</div>
<div class="quote_div">
<br>格式，如果成功：<br><br>    {"status": "0", "imgUrl": "' . $uri . $filename . '"}<br><br>失败：<br>     {"status": "1", "error": "上传过程中出错了"}<br><br>或者直接用数组：<br><br>["0", "imgUrl"]<br><br>也可以自定义：<br><pre name="code" class="javascript">new KISSY.Editor {

pluginsConfig: {

    image: {
        upload: {
              formatRespone: function(data) {
                  // data 是服务器返回的 json 数据，格式任意
                  // 你的处理代码
                  // 返回默认格式 ["0", "imgUrl"]  or ["1", "errMsg"]
              }
        }
    }

}

}
</pre>
<br><br>最简单的一个 upload.php，测试用：<br><br>http://kissy.googlecode.com/svn/trunk/src/editor/demo/upload.php</div>
<p> </p>
<p> 我在后台action中所返回的两种数据格式都出错了,一种是:["0","http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"] 另一种是:{"status": "0", "imgUrl": "http://localhost:8080/send-mail/fileUpload/20091118234056.jpg"} 不知其因，望Lz给以解决，万谢！</p>
<p> </p>
<p> </p>

45 楼 h521999 2009-11-18  

哇，确实小巧而强捍，强烈支持！还有一点希望楼主同时把文档跟上：）

44 楼 cue2008 2009-11-10  

我用了下,发现上传图片,只能用链接的,本度上传好像不行阿?

43 楼 mazzystar 2009-11-06  

真是图文并茂啊

42 楼 chengyoung 2009-11-06  

好东西哦~~

41 楼 east_java 2009-11-05  

LZ 加个写代码的功能  技术网站这个少不了.