可視化HTML編輯器 KindEditor 4.0 alpha 發布

KindEditor是一套開源的HTML可視化編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，兼容IE、 Firefox、 Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫，可以無縫的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用，2006年7月首次發布2.0以 來，KindEditor依靠出色的用戶體驗和領先的技術不斷擴大編輯器市場占有率，目前在國內已經成為最受歡迎的編輯器之一。
本站的OPEN開源資訊就有用到這個編輯器，非常不錯。

主要特點

• 體積小，加載速度快，但功能十分豐 富。
• 內置自定義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