KindEditor4.0 程序重新架构 新增一键排版

  • 时间:
  • 浏览:0
作者:匿名 hihi 来源:ChinaZ源码报导 浏览: 2011-8-16 11:24:11 字号:大 中 小

[摘要]KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,都利于无缝的于Java、.NET、PHP、ASP等线程接合。

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



KindEditor v4.0



KindEditor v3.5

1. 增加的文档排版功能有:清理html代码、一键排版、插入分页符和行距等,清理html代码和一键盘排版所得到的效果之后 会和用户不想的这些出入,不过也方便了这些,如下图黄色区域所示是新功能的图标:

2. 插入模板是将预先准备好的模板,如标题和文字、表格等,插入到编辑器中。批量操作时,都利于省去过多过多步骤,源码自带二个模板。

3. 插入文件功能累似 CMS内容管理系统中的附件功能,上传文件并把文件地址插入到内容编辑框中。

4. 谷歌地图一般用于地址标志,都利于搜索地址,怎么让以图片形式插入到编辑器中。

5. 插入线程代码,以预定义的一段线程代码插入到编辑器中,不过KindEditor默认不支持代码高亮利于用户自行设置代码高亮的CSS,插入代码高亮在站长等大每种用户中还是无缘无故使用的。

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>");

// 第2个多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 : 800,

title : '测试窗口',

body : '<div ><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部署。

KindEditor下载:

KindEditor附录:

KindEditor演示 http://www.kindsoft.net/demo.php

KindEditor文档 http://www.kindsoft.net/docs/index.html

sssss
Tags: KindEditor   在线编辑器   免费编辑器  
责任编辑:190