可视化HTML编辑器 KindEditor 4.0 alpha 发布
openkk 13年前
<strong><a href="http://www.open-open.com/ajax/ajax20090908094212.htm" target="_blank">KindEditor</a>是一套开源的HTML可视化编辑器</strong>，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、 Firefox、 Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以 来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。 <br /> <span style="font-weight:bold;">本站的<a href="http://www.open-open.com/news" target="_blank">OPEN开源资讯</a>就有用到这个编辑器，非常不错。<br /> <img title="30080404_0ujd.png" border="0" alt="30080404_0ujd.png" src="https://simg.open-open.com/show/69e192597079b9d8191a529f4e1563f6.jpg" /><br /> </span> <h3>主要特点</h3> <ul> <li>体积小，加载速度快，但功能十分丰 富。 </li> <li>内置自定义range，完美地支持span标记。 </li> <li>基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。 </li> <li>修改编辑器风格很容易，只需修改一个CSS文件。 </li> <li>支持大部分主流浏 览器，比如IE、Firefox、Safari、Chrome、Opera。 </li> </ul> <p>在线演示：<a href="/misc/goto?guid=4958184676458640342" rel="nofollow">http://kindsoft.net/demo.php</a><br /> </p> <p>KindEditor 4.0 重新设计了程序架构，重写了所有代码，插件可以按需动态加载，内置了小巧实用的DOM(Node、Range)类库（Node的接口类似jQuery）。体积方面kindeditor-min.js被gzip后只有25.9KB，比jQuery还小，在大流量的互联网应用上使用毫无压力。</p> <h3>新特性：</h3> <p>1. 创建编辑器时可使用选择器，并返回editor对象。</p> <pre class="brush:html; toolbar: true; auto-links: false;"><link rel="stylesheet" href="/editor/themes/default/default.css" /> <script charset="utf-8" src="/editor/kindeditor.js"></script> <script charset="utf-8" src="/editor/lang/zh_CN.js"></script> <script> var editor; KindEditor.ready(function(K) { editor = K.create('#editor_id'); }); </script></pre>2. 内置小型Node类库。 <pre class="brush:javascript; toolbar: true; auto-links: false;">// 所有匹配的div的border改成黑色，并设置innerHTML K('#id div').css('border', '1px solid #000').html("<strong>内容</strong>"); // 第一个div的innerHTML K('#id div').html(); // 所有匹配的div添加click事件 K('#id div').click(function(e) { // print nodeName console.log(K(this).name); });</pre> <p></p> <p></p> <p>Node文档：<a href="/misc/goto?guid=4958184677209400588" target="_blank">http://www.kindsoft.net/docs/node.html</a></p> <p> </p> <p>3. Range采用W3C标准，内置自定义样式系统，文字颜色、文字背景、粗体、斜体、下划线、删除线操作在不同浏览器上生成相同HTML代码。</p> <p>Range文档：<a href="/misc/goto?guid=4958184677949223666" target="_blank">http://www.kindsoft.net/docs/range.html</a></p> <p>Command文档：<a href="/misc/goto?guid=4958184678692729128" target="_blank">http://www.kindsoft.net/docs/cmd.html</a></p> <p> </p> <p>4. 可以单独调用弹出窗口、下拉菜单、Tabs、取色器、上传按钮等UI组件。</p> <pre class="brush:javascript; toolbar: true; auto-links: false;">var dialog = K.dialog({ width : 500, title : '测试窗口', body : '<div style="margin:10px;"><strong>内容</strong></div>', closeBtn : { name : '关闭', click : function(e) { dialog.remove(); } }, yesBtn : { name : '确定', click : function(e) { alert(this.value); } }, noBtn : { name : '取消', click : function(e) { dialog.remove(); } } });</pre> <p></p> <p>5. 弹出窗口采用js动态加载方式，大部分功能可以跨域调用，并解决了document.domain问题，有利于静态资源分离和CDN部署。</p> <h3>演示：</h3> <div> <a href="/misc/goto?guid=4958184679421350316" target="_blank">http://www.kindsoft.net/demo.php</a> </div> <h3>下载：</h3> <p><a href="/misc/goto?guid=4958184680163046664" target="_blank">http://kindeditor.googlecode.com/files/kindeditor-4.0-alpha.zip</a></p> <h3>文档：</h3> <p><a href="/misc/goto?guid=4958184680908897296" target="_blank">http://www.kindsoft.net/docs/index.html</a></p> <p> </p> <p>因为4.0刚刚完成，所以可能隐藏着不少bug，也有很多改进余地，非常欢迎各位用户在googlecode或在kindsoft.net网站上提交bug和建议。</p> <p> </p> <p>googlecode issues：<a href="/misc/goto?guid=4958184681638458639" target="_blank">http://code.google.com/p/kindeditor/issues/list</a></p> <p>kindsoft.net bbs：<a href="/misc/goto?guid=4958184682385396260" target="_blank">http://www.kindsoft.net/bbs.php</a></p> <p>微博：<a href="/misc/goto?guid=4958184683120541265" target="_blank">http://www.weibo.com/luolonghao</a></p> <p></p> <p></p>