1、编辑器使用方法1. 下载编辑器下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。下载页面: http:/ 部署编辑器解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http:/您的域名/editor/Note您可以根据需求删除以下目录后上传到服务器。 asp - ASP程序 - ASP.NET程序 php - PHP程序 jsp - JSP程序 examples - 演示文件3. 修改 HTML页面1. 在需要显示编辑器的位置添加 textarea输入框。strongHTML内容/str
2、ongNote id在当前页面必须是唯一的值。 在 textarea里设置 HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET 等)直接显示内 容，则必须转换HTML特殊字符(,var editor;KindEditor.ready(function(K) editor = K.create(#editor_id););Note 第一个参数可用其它 CSS选择器，匹配多个 textarea时只在第一个元素上加载编辑器。 通过 K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。var options = cs
3、sPath : /css/index.css,filterMode : true;var editor = K.create(textareaname=“content“, options);4. 获取 HTML数据/ 取得 HTML内容html = editor.html();/ 同步数据后可以直接取得 textarea的 valueeditor.sync();html = document.getElementById(editor_id).value; / 原生 APIhtml = K(#editor_id).val(); / KindEditor Node APIhtml = $(#e
4、ditor_id).val(); / jQuery/ 设置 HTML内容editor.html(HTML内容);Note KindEditor的可视化操作在新创建的 iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将 HTML数据同步到原来的 textarea，editor.sync()函数会完成这个动作。 KindEditor在默认情况下自动寻找 textarea所属的 form元素，找到form后 onsubmit事件里添加 sync函数，所以用 form方式提交数据，不需要手动执行 sync()函数。编辑器初始化参数width编辑器的宽度，可以设置 px
5、或%，比 textarea输入框样式表宽度优先度高。 数据类型: String 默认值: textarea 输入框的宽度示例:K.create(#id, width : 700px);height编辑器的高度，只能设置 px，比 textarea输入框样式表高度优先度高。 数据类型: String 默认值: textarea 输入框的高度minWidth指定编辑器最小宽度，单位为 px。 数据类型: Int 默认值: 650minHeight指定编辑器最小高度，单位为 px。 数据类型: Int 默认值: 100items配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。 数据类型:
6、Array 默认值:source, |, undo, redo, |, preview, print, template, code, cut, copy, paste,plainpaste, wordpaste, |, justifyleft, justifycenter, justifyright,justifyfull, insertorderedlist, insertunorderedlist, indent, outdent, subscript,superscript, clearhtml, quickformat, selectall, |, fullscreen, /,for
7、matblock, fontname, fontsize, |, forecolor, hilitecolor, bold,italic, underline, strikethrough, lineheight, removeformat, |, image, multiimage,flash, media, insertfile, table, hr, emoticons, baidumap, pagebreak,anchor, link, unlink, |, aboutsource HTML代码preview 预览undo 后退redo 前进cut 剪切copy 复制paste 粘贴p
8、lainpaste 粘贴为无格式文本wordpaste 从 Word粘贴selectall 全选justifyleft 左对齐justifycenter 居中justifyright 右对齐justifyfull 两端对齐insertorderedlist 编号insertunorderedlist 项目符号indent 增加缩进outdent 减少缩进subscript 下标superscript 上标formatblock 段落fontname 字体fontsize 文字大小forecolor 文字颜色hilitecolor 文字背景bold 粗体italic 斜体underline 下划
9、线strikethrough 删除线removeformat 删除格式image 图片flash Flashmedia 视音频table 表格hr 插入横线emoticons 插入表情link 超级链接unlink 取消超级链接fullscreen 全屏显示about 关于print 打印code 插入程序代码map Google地图baidumap 百度地图lineheight 行距clearhtml 清理 HTML代码pagebreak 插入分页符quickformat 一键排版insertfile 插入文件template 插入模板anchor 插入锚点noDisableItemsdes
10、ignMode 为 false时，要保留的工具栏图标。 数据类型: Array 默认值: source, fullscreenfilterModetrue时根据 htmlTags 过滤 HTML代码，false 时允许输入任何代码。 数据类型: Boolean 默认值: trueNote4.1.1版本开始默认值为 true。htmlTags指定要保留的 HTML标记和属性。Object 的 key为 HTML标签名，value 为 HTML属性数组，”.”开始的属性表示 style属性。 数据类型: Object 默认值:font : color, size, face, .backgroun
11、d-color,span : .color, .background-color, .font-size, .font-family, .background,.font-weight, .font-style, .text-decoration, .vertical-align, .line-height,div : align, .border, .margin, .padding, .text-align, .color,.background-color, .font-size, .font-family, .font-weight, .background,.font-style,
12、.text-decoration, .vertical-align, .margin-left,table: border, cellspacing, cellpadding, width, height, align, bordercolor,.padding, .margin, .border, bgcolor, .text-align, .color, .background-color,.font-size, .font-family, .font-weight, .font-style, .text-decoration, .background,.width, .height, .
13、border-collapse,td,th: align, valign, width, height, colspan, rowspan, bgcolor,.text-align, .color, .background-color, .font-size, .font-family, .font-weight,.font-style, .text-decoration, .vertical-align, .background, .border,a : href, target, name,embed : src, width, height, type, loop, autostart,
14、 quality, .width, .height, align, allowscriptaccess,img : src, width, height, border, alt, title, align, .width, .height, .border,p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6 : align, .text-align, .color, .background-color, .font-size, .font-family, .background,.font-weight, .font-style, .text-decoration
15、, .vertical-align, .text-indent, .margin-left,pre : class,hr : class, .page-break-after,br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del : wellFormatModetrue时美化 HTML数据。 数据类型: Boolean 默认值: trueresizeType2或 1或 0，2 时可以拖动改变宽度和高度，1 时只能改变高度，0 时不能拖动。 数据类型: Int 默认值: 2themeType指定主题风格，可设置”default”、”simple”，指定
16、 simple时需要引入simple.css。 数据类型: String 默认值: “default”示例:var editor;KindEditor.ready(function(K) editor = K.create(#editor_id, themeType : simple););langType指定语言，可设置”en”、”zh_CN”，需要引入 lang/langType.js。 数据类型: String 默认值: “zh_CN”示例:var editor;KindEditor.ready(function(K) editor = K.create(#editor_id, lang
17、Type : en););designMode可视化模式或代码模式 数据类型: Boolean 默认值: truefullscreenModetrue时加载编辑器后变成全屏模式。 数据类型: Boolean 默认值: falsebasePath指定编辑器的根目录路径。 数据类型: String 默认值: 根据 kindeditor.js文件名自动获取themesPath指定编辑器的 themes目录路径。 数据类型: String 默认值: basePath + themes/pluginsPath指定编辑器的 plugins目录路径。 数据类型: String 默认值: basePath +
18、 plugins/langPath指定编辑器的 lang目录路径。 数据类型: String 默认值: basePath + lang/minChangeSizeundo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到 undo记录里。 数据类型: String 默认值: 5urlType改变站内本地 URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改 URL，relative 为相对路径，absolute 为绝对路径，domain 为带域名的绝对路径。 数据类型: String 默认值: “”newlineTag设置回车换行标
19、签，可设置”p”、”br”。 数据类型: String 默认值: “p”pasteType设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML 粘贴 数据类型: Int 默认值: 2dialogAlignType设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定 page时按当前页面居中，指定空时按编辑器居中。 数据类型: String 默认值: “page”shadowModetrue时弹出层(dialog)显示阴影。 数据类型: Boolean 默认值: trueuseContextmenutrue时使用右键菜单，false 时屏蔽右键菜单。 数据类型: Bool
20、ean 默认值: truesyncType同步数据的方式，可设置”“、”form”，值为 form时提交 form时自动同步，空时不会自动同步。 数据类型: String 默认值: “form”indentCharwellFormatMode 为 true时，HTML 代码缩进字符。 数据类型: String 默认值: “t”cssPath指定编辑器 iframe document的 CSS文件，用于设置可视化区域的样式。 数据类型: String 或 Array 默认值: 空cssData指定编辑器 iframe document的 CSS数据，用于设置可视化区域的样式。 数据类型: Str
21、ing 默认值: 空bodyClass指定编辑器 iframe document body的 className。 数据类型: String 默认值: “ke-content”colorTable指定取色器里的颜色。 数据类型: Array 默认值:#E53333, #E56600, #FF9900, #64451D, #DFC5A4, #FFE500,#009900, #006600, #99BB00, #B8D100, #60D978, #00D5FF,#337FE5, #003399, #4C33E5, #9933E5, #CC33E5, #EE33EE,#FFFFFF, #CCCCCC
22、, #999999, #666666, #333333, #000000afterCreate设置编辑器创建后执行的回调函数。 数据类型: Function 默认值: 无afterChange编辑器内容发生变化后执行的回调函数。 数据类型: Function 默认值: 无afterTab按下 TAB键后执行的的回调函数。 数据类型: Function 默认值: 插入 4个空格的函数afterFocus编辑器聚焦(focus)时执行的回调函数。 数据类型: Function 默认值: 无afterBlur编辑器失去焦点(blur)时执行的回调函数。 数据类型: Function 默认值: 无af
23、terUpload上传文件后执行的回调函数。 数据类型: Function 默认值: 无KindEditor.ready(function(K) K.create(#id, afterUpload : function(url) alert(url);););uploadJson指定上传文件的服务器端程序。 数据类型: String 默认值: basePath + php/upload_json.phpfileManagerJson指定浏览远程图片的服务器端程序。 数据类型: String 默认值: basePath + php/file_manager_json.phpallowPrevie
24、wEmoticonstrue时鼠标放在表情上可以预览表情。 数据类型: Boolean 默认值: trueallowImageUploadtrue时显示图片上传按钮。 数据类型: Boolean 默认值: trueallowFlashUploadtrue时显示 Flash上传按钮。 数据类型: Boolean 默认值: trueallowMediaUploadtrue时显示视音频上传按钮。 数据类型: Boolean 默认值: trueallowFileUploadtrue时显示文件上传按钮。 数据类型: Boolean 默认值: trueNote4.0.6版本开始支持。allowFileMa
25、nagertrue时显示浏览远程服务器按钮。 数据类型: Boolean 默认值: falsefontSizeTable指定文字大小。 数据类型: Array 默认值:9px, 10px, 12px, 14px, 16px, 18px, 24px, 32pximageTabIndex图片弹出层的默认显示标签索引。 数据类型: Int 默认值: 0Note4.0.6版本开始支持。formatUploadUrlfalse时不会自动格式化上传后的 URL。 数据类型: Boolean 默认值: trueNote4.1版本开始支持。fullscreenShortcutfalse时禁用 ESC全屏快捷键
26、。 数据类型: Boolean 默认值: trueNote4.1版本开始支持。extraFileUploadParams上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。 数据类型: Array 默认值: KindEditor.ready(function(K) K.create(#id, extraFileUploadParams : item_id : 1000,category_id : 1););更改编辑器外观1. 添加”example1”风格1. 添加 themes/example1/example1.css，在这个文件里定义覆盖default.css里的 CSS
27、。.ke-container-example1 display: block;border: 1px solid #CCC;background-color: #FFF;overflow: hidden;.ke-container-example1 .ke-toolbar border-bottom: 1px solid #CCC;background-color: #FFF;padding: 2px 5px;overflow: hidden;/* 在这里继续定义其它 CSS */2. 调用编辑器时，引入 example1.css，并指定 themeType。var editor;KindEd
28、itor.ready(function(K) editor = K.create(#editor_id, themeType : example1););添加自定义插件1. 添加”hello”插件1. 添加 plugins/hello/hello.js文件。KindEditor.plugin(hello, function(K) var editor = this, name = hello;/ 点击图标时执行editor.clickToolbar(name, function() editor.insertHtml(你好);););2. 定义语言，在页面的标签里添加以下脚本。KindEdit
29、or.lang(hello : 你好);3. 定义工具栏图标的 CSS，在页面的标签里添加以下 CSS。.ke-icon-hello background-image: url(/skins/default/default.gif);background-position: 0px -672px;width: 16px;height: 16px;4. 最后调用编辑器时 items数组里添加 hello。K.create(#id, items : hello);完整代码：Hello.ke-icon-hello background-image: url(/skins/default/defaul
30、t.gif);background-position: 0px -672px;width: 16px;height: 16px;KindEditor.lang(hello : 你好);KindEditor.ready(function(K) K.create(#id, items : hello););上传文件KindEditor默认提供 ASP、ASP.NET、PHP、JSP 上传程序，这些程序是演示程序，建议不要直接在实际项目中使用。 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。选择程序语言/ ASPKindEditor.ready(function(K) K.create(
31、#textarea_id, uploadJson : /asp/upload_json.asp,fileManagerJson : /asp/file_manager_json.asp,allowFileManager : true););/ ASP.NETKindEditor.ready(function(K) K.create(#textarea_id, uploadJson : / : / : true););/ JSPKindEditor.ready(function(K) K.create(#textarea_id, uploadJson : /jsp/upload_json.jsp
32、,fileManagerJson : /jsp/file_manager_json.jsp,allowFileManager : true););Note具体使用方法请参见各语言(asp、、php、jsp)目录下的 demo.xxx文件。POST参数 imgFile: 文件 form名称 dir: 上传类型，分别为 image、flash、media、file返回格式(JSON)/成功时“error“ : 0,“url“ : “http:/ : 1,“message“ : “错误信息“常见问题Contents 常见问题o 编辑器好像是 UTF-8编码的，可以在 GB2312页面上使用吗？o 我
33、取不到编辑器数据，直接取得 textarea的 value也没用。编辑器好像是 UTF-8编码的，可以在 GB2312页面上使用吗？可以使用。有两种方法，一种方法是引入 kindeditor.js文件时将 script的charset属性设置成 utf-8。还有一种方法是直接将 html/js/css文件编码都转换成 GB2312编码（用Notepad+、editPlus 等文本编辑器就可以转换编码），不过转换格式后升级比较困难，建议使用第一种方法。我取不到编辑器数据，直接取得 textarea的 value也没用。KindEditor的可视化操作在新创建的 iframe上执行，代码模式下的
34、textarea框也是新创建的，所以最后提交前需要将 HTML数据设置到原来的textarea，editor.sync()函数会完成这个动作。KindEditor在默认情况下自动寻找 textarea所属的 form元素，找到 form后onsubmit事件里添加 editor.sync()函数，所以用 form方式提交数据，不需要手动执行 editor.sync()函数。/ 将编辑器的 HTML数据同步到 textareaeditor.sync();基础(Base) APIK.VERSION当前 KindEditor的版本号。Note当前浏览器的版本号为 K.V 。K.IE当前浏览器内核为
35、IE时 true，否则 false。K.GECKO当前浏览器内核为 Gecko（Firefox）时 true，否则 false。K.WEBKIT当前浏览器内核为 Webkit（Safari、Chrome）时 true，否则 false。K.OPERA当前浏览器内核为 Opera时 true，否则 false。K.MOBILE当前浏览器为移动设备上的浏览器时 true，否则 false。K.QUIRKStrue时怪异模式，false 时标准模式。K.V当前浏览器的版本号。K.TIME加载 JS时的时间。K.isArray(val)判断一个变量是否数组。 参数:o mixed val: 目标变量
36、返回: 当变量为数组时返回 true，否则返回 false。示例:bool = K.isArray(1, 2, 3); /返回 truebool = K.isArray(one : 1); /返回 falseK.isFunction(val)判断一个变量是不是函数。 参数:o mixed val: 目标变量 返回: 当变量为函数时返回 true，否则返回 false。示例:bool = K.isFunction(function () ); /返回 truebool = K.isFunction(); /返回 falseK.inArray(val , arr)查找一个变量在一个数组中第一次出现
37、的索引位置。 参数:o mixed val: 任意变量o array arr: 数组 返回: 返回第一次出现的索引位置，如果没找到，则返回-1。示例:index = K.inArray(2, 1, 2, 3); /返回 1index = K.inArray(1, 1, 2, 3); /返回 0index = K.inArray(10, 1, 2, 3); /返回-1K.each(obj , fn)遍历一个对象或数组。 参数:o object|array obj: 目标对象或数组o function fn: 回调函数，回调函数的第一个参数为 key，第二个参数为 value。 返回: 无示例:/
38、遍历数组K.each(1, 2, 3, function (i) console.log(i + : + this););/遍历对象K.each(one : 1, two : 2, function (key, val) console.log(key + : + val););K.trim(obj , fn)清除字符串两边的空白。 参数:o string str: 目标字符串 返回: string示例:var str = K.trim( abc ); /返回“abc“K.inString(val , str , delimiter)判断一个字符串是否包含在目标字符串里。 参数:o strin
39、g val: 要判断的字符串o string str: 用 delimiter分隔的目标字符串o string delimiter: 分隔符，默认值为逗号(,)。 返回: boolean示例:bool = K.inString(aaa, abc,aaa,bbb,ccc); /返回 truebool = K.inString(aaa, abc aaa bbb ccc, ); /返回 trueK.addUnit(val , unit)一个数字后面添加指定字符串，如果 val不是数字则返回原值。 参数:o string val: 任意数字或字符串o string str: 单位，默认值为 px 返回
40、: string示例:width = K.addUnit(100); /返回“100px“width = K.addUnit(100px); /返回“100px“width = K.addUnit(80%); /返回“80%“width = K.addUnit(80, %); /返回“80%“width = K.addUnit(); /返回“width = K.addUnit(null); /返回 nullK.removeUnit(val)从一个字符串中提取数字，如果该字符串中没有数字则返回 0。 参数:o int|string val: 任意字符串 返回: int示例:width = K.r
41、emoveUnit(100px); /返回 100width = K.removeUnit(); /返回 0width = K.removeUnit(null); /返回 0K.escape(val)将特殊字符转换成 HTML entities。 参数:o string val: 任意字符串 返回: string示例:var str = K.escape( /返回“div id=abc/div“K.unescape(val)将特殊 HTML entities转换成字符。 参数:o string val: 任意字符串 返回: string示例:var str = K.unescape(div i
42、d=abc/div); /返回“ /返回“fontWeight“K.toHex(val)将任意字符串中的 RGB颜色转换成 16进制颜色。 参数:o string val: 包含 RGB颜色的字符串 返回: string 16 进制颜色示例:var hex = K.toHex(rgb(0, 0, 0); /返回“#000000“K.toMap(val , delimiter)将一个字符串或数字转换成 key-value对象。 参数:o string|array val: 字符串或者数组，字符串时用 delimiter分隔的字符串o string delimiter: 分隔符，当 val为字符串
43、时有效，默认值为逗号(,) 返回: object示例:map = K.toMap(abc,aaa,bbb); /返回abc : true, aaa : true, bbb : truemap = K.toMap(abc-aaa-bbb, -); /返回abc : true, aaa : true, bbb : truemap = K.toMap(abc, aaa, bbb); /返回abc : true, aaa : true, bbb : trueK.toArray(obj , offset)将一个数组风格对象转换成真正的数组。 参数:o object obj: 任意对象 返回: array
44、示例:var arr = K.toArray(document.getElementsByTagName(div);K.undef(val , defaultVal)当 val为 undefined时返回 defaultVal，否则返回 val。 参数:o mixed val: 任意变量 返回: val 或 defaultVal示例:val = K.undef(1, 0); /返回 1var obj = ;val = K.undef(obj.aaa, 0); /返回 0K.invalidUrl(val)判断 URL或路径是否合法。 参数:o string val: URL或路径 返回: boo
45、lean示例:val = K.invalidUrl(abc.html); /返回 trueval = K.invalidUrl(abc.html); /返回 falseK.addParam(url, param)URL添加 GET参数，拼接时自动判断连接字符(url = K.addParam(http:/ abc=123);K.extend(fn , proto)创建 class。 参数:o function fn: Functiono object proto: fn的 prototype 返回: undefined示例:function Animal() this.init();K.ext
46、end(Animal, init : function() console.log(init animal.);,run : function() console.log(animal is running.););var animal = new Animal();animal.run();K.extend(child , parent , proto)继承 class。 参数:o function child: 子类o function parent: 父类o object proto: 子类的 prototype 返回: undefined示例:/ create Animal classfunction Animal(name) this.init(name);K.extend(Animal, init : functi
