可视化HTML编辑器 KindEditor 4.0 alpha 发布

摘要:<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依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、 Firefox、 Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以 来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
本站的OPEN开源资讯就有用到这个编辑器,非常不错。
30080404_0ujd.png

主要特点

  • 体积小,加载速度快,但功能十分丰 富。
  • 内置自定义range,完美地支持span标记。
  • 基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。
  • 修改编辑器风格很容易,只需修改一个CSS文件。
  • 支持大部分主流浏 览器,比如IE、Firefox、Safari、Chrome、Opera。

在线演示:http://kindsoft.net/demo.php

KindEditor 4.0 重新设计了程序架构,重写了所有代码,插件可以按需动态加载,内置了小巧实用的DOM(Node、Range)类库(Node的接口类似jQuery)。体积方面kindeditor-min.js被gzip后只有25.9KB,比jQuery还小,在大流量的互联网应用上使用毫无压力。

新特性:

1. 创建编辑器时可使用选择器,并返回editor对象。

<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>
2. 内置小型Node类库。
// 所有匹配的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);
});

Node文档:http://www.kindsoft.net/docs/node.html

 

3. Range采用W3C标准,内置自定义样式系统,文字颜色、文字背景、粗体、斜体、下划线、删除线操作在不同浏览器上生成相同HTML代码。

Range文档:http://www.kindsoft.net/docs/range.html

Command文档:http://www.kindsoft.net/docs/cmd.html

 

4.  可以单独调用弹出窗口、下拉菜单、Tabs、取色器、上传按钮等UI组件。

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();
                }
        }
});

5. 弹出窗口采用js动态加载方式,大部分功能可以跨域调用,并解决了document.domain问题,有利于静态资源分离和CDN部署。

演示:

下载:

http://kindeditor.googlecode.com/files/kindeditor-4.0-alpha.zip

文档:

http://www.kindsoft.net/docs/index.html

 

因为4.0刚刚完成,所以可能隐藏着不少bug,也有很多改进余地,非常欢迎各位用户在googlecode或在kindsoft.net网站上提交bug和建议。

 

googlecode issues:http://code.google.com/p/kindeditor/issues/list

kindsoft.net bbs:http://www.kindsoft.net/bbs.php

微博:http://www.weibo.com/luolonghao

扩展阅读

中文热门开源项目Top100,你知道多少?
2014年国人开发的最热门的开源软件TOP 100
可视化HTML编辑器 KindEditor 4.0.2 发布
可视化HTML编辑器 KindEditor 4.0.3 发布
KindEditor 源代码改用 Github 管理

为您推荐

每个程序员都会的 35 个 jQuery 小技巧
40 个重要的 HTML5 面试问题及答案
HTML5 中 40 个最重要的技术点
前端篇: 前端演进史
可视化HTML编辑器 KindEditor 4.0 alpha 发布

更多

编辑器
前端技术