主题: KindEditor 4.0 alpha 发布
作者: Roddy, 发布日期: 2011-08-16 12:40:35, 浏览数: 6961

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

作者: 凭海临风, 发布日期: 2011-08-16 13:08:28
吼吼,终于出来啦。
回复
作者: 小浪子, 发布日期: 2011-08-16 13:27:22

能否把弹出框该的漂亮点啊。。像58的.
http://www.dingzhoupaimai.com/UpLoadFile/Images/e/2011-08/2011081613180721831924.jpg

发现这编辑器的搭配。太适合你的网站了。有点灰感觉。

 

奇怪了。为什么不能发图片呢。。

回复
作者: 小浪子, 发布日期: 2011-08-16 13:36:09

哈哈看了下,KindEditor内置小型Node类库。和jq 差不多。难道KindEditor将来的发展也准备搞个js库出来。

那真是太期待了。。

回复
作者: 随风漂, 发布日期: 2011-08-16 16:44:40
祝贺KindEditor 4.0 alpha 发布
回复
作者: 麦当苗儿, 发布日期: 2011-08-16 16:54:31

终于发布了。。。 祝贺祝贺!!!

 

感觉KE现在做的像一个类库  然而 编辑器只是类库的一个插件  。。。。 哈哈 。。。

回复
作者: 麦当苗儿, 发布日期: 2011-08-16 17:12:54

还一个问题就是

为什么4.0版本  的 语言包 和 CSS文件不和原来一样动态加载   需要手动引入3个文件 

把语言包根据设置 动态加载 不是更好么

觉得原来只需要引入一个JS文件比较好

 

而且经常会用到动态加载编辑器  有可能一些用户根本都不需要用到编辑器  这样 默认就已经加载了语言包和CSS文件就比较浪费。。。

回复
作者: 喔喔兒, 发布日期: 2011-08-16 19:06:15
哟, 终于发布4了啊, 嗯,
回复
作者: Roddy, 发布日期: 2011-08-17 00:34:19

回复麦当苗儿:

1. CSS动态加载还在考虑中,感觉少一行代码之外没什么好处。

2. 语言js文件其实支持动态加载的,不引入也可以,但这样编辑器的加载速度会慢,因为必须等到lang/xxx.js加载成功后才可以执行加载编辑器的操作。

回复
作者: 小浪子, 发布日期: 2011-08-17 08:39:26


回复Roddy:确实不好。以前是加载编辑器的js文件就OK了。

能否加一个参数。如:

KindEditor.ready(function(K) {

 K.create('#content', {

  language : 'zh_CN',

  resizeType : 1,

  filterMode : true,

  allowImageUpload : false,

  allowFlashUpload : false,

  allowMediaUpload : false,

  allowFileManager : false,

  cssPath : ['ke4/plugins/code/prettify.css', 'css/main.css'],

  items : [

   'source', '|', 'fullscreen', 'print', 'undo', 'redo', 'cut', 'copy', 'paste',

   'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

   'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

   'superscript', '|', 'code', '/',

   'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

   'italic', 'underline', 'strikethrough', 'removeformat', 'selectall', '|', 'image',

   'flash', 'media', 'table', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'
  ]
 });
});

回复
作者: Roddy, 发布日期: 2011-08-19 18:40:57
回复小浪子:可以加langType : 'zh_CN'
回复
作者: xxstop, 发布日期: 2011-12-04 22:50:45
<!--我测试这个是一个BUG。在源代码里面直接写<!--,官方怎么做到把它屏蔽的呢。
回复
发表回复