网页编辑.docx

1、网页编辑1. 下载 KindEditor 最新版本。打开下载页面2. 解压zip文件，将所有文件上传到您的网站程序目录下。例如：http:/您的域名/editor/3. 在需要显示编辑器的位置添加TEXTAREA输入框。id在当前页面必须是唯一的值，还有，在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。在TEXTAREA里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(,&,)。具体例子请参考各语言目录下面的de

2、mo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。<strong>HTML内容</strong>4. 在该HTML页面添加以下代码。 KE.show( id : editor_id );注：KE.show的原理是先执行KE.init设置一些变量，等DOM全部创建以后才开始执行KE.create创建编辑器。 如果浏览器不触发DOMContentLoaded事件（例如：jQuery的$.ready，点击某个按钮，通过innerHTML插入HTML等），则不能使用KE.show，需要直接调用KE.init和KE.create。KE.init( id : edi

3、tor_id);$.ready(function() KE.create(editor_id););调用KE.show和KE.init时，除id之外还可以设置其它的参数，具体属性请参考编辑器初始化参数。 调用KE.show或KE.init时可以设置以下参数。 1. idTEXTAREA输入框的ID，必须设置。数据类型：String2. items配置编辑器的工具栏，其中-表示换行，|表示分隔符。数据类型：Array默认值： source, |, fullscreen, undo, redo, print, cut, copy, paste,plainpaste, wordpaste, |, j

4、ustifyleft, justifycenter, justifyright,justifyfull, insertorderedlist, insertunorderedlist, indent, outdent, subscript,superscript, |, selectall, -,title, fontname, fontsize, |, textcolor, bgcolor, bold,italic, underline, strikethrough, removeformat, |, image,flash, media, advtable, hr, emoticons,

5、link, unlink, |, about3. width编辑器的宽度，可以设置px或%，比TEXTAREA输入框样式表宽度优先度高。数据类型：String默认值：TEXTAREA输入框的宽度注: 3.2版本开始支持。4. height编辑器的高度，只能设置px，比TEXTAREA输入框样式表高度优先度高。数据类型：String默认值：TEXTAREA输入框的高度注: 3.2版本开始支持。5. minWidth数据类型：Int指定编辑器最小宽度，单位为px。默认值：2006. minHeight数据类型：Int指定编辑器最小高度，单位为px。默认值：1007. filterMode数据类型：

6、Booleantrue时过滤HTML代码，false时允许输入任何代码。默认值：false注: 3.4以前版本的filterMode默认值为true。8. htmlTags指定要保留的HTML标记和属性。哈希数组的key为HTML标签名，value为HTML属性数组，.开始的属性表示style属性。数据类型：Object默认值： font : color, size, face, .background-color, span : style, div : class, align, style, table: class, border, cellspacing, cellpadding,

7、width, height, align, style, td,th: class, align, valign, width, height, colspan, rowspan, bgcolor, style, a : class, href, target, name, style, embed : src, width, height, type, loop, autostart, quality, style, align, allowscriptaccess, /, img : src, width, height, border, alt, title, align, style,

8、 /, hr : class, /, br : /, p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6 : align, style, tbody,tr,strong,b,sub,sup,em,i,u,strike : 注：filterMode为true时有效。3.4版本开始属性可设置style，保留所有inline样式。9. resizeMode2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。数据类型：Int默认值：210. skinType风格类型，default或tinymce。数据类型：String默认值：default注：3.4以

9、前版本和3.4.1版本开始默认值为default，3.4版本的默认值为oxygen。 11. wyswygMode可视化模式或代码模式数据类型：Boolean默认值：true12. cssPath指定编辑器iframe document的CSS，用于设置可视化区域的样式。数据类型：String或Array默认值：空注：3.4.1版本开始可指定多个CSS文件。例如：cssPath : a.css, b.css 13. skinsPath指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。数据类型：String默认值：KE.scriptPath + skins/14. pl

10、uginsPath指定编辑器的plugins目录。数据类型：String默认值：KE.scriptPath + plugins/15. minChangeSizeundo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。数据类型：Int默认值：516. loadStyleModetrue时自动加载编辑器的CSS。数据类型：Boolean默认值：true注: 3.4版本开始支持。17. urlType改变站内本地URL，可设置空、relative、absolute、domain。空为不修改URL，relative为相对路径，absolute为绝对路径，dom

11、ain为带域名的绝对路径。数据类型：String默认值：空注: 3.4版本开始支持，3.4.1版本开始默认值为空。18. newlineTag设置回车换行标签，可设置p、br。数据类型：String默认值：br注: 3.4版本开始支持。19. afterCreate设置编辑器创建后执行的回调函数。数据类型：Function默认值：无20. afterDialogCreate设置弹出浮动框创建后执行的回调函数。数据类型：Function默认值：无注: 3.4.3版本开始支持。21. allowUploadtrue或false，true时显示上传图片标签。数据类型：Boolean默认值：true注

12、: 3.4版本开始支持。22. allowFileManagertrue或false，true时显示浏览服务器图片功能。数据类型：Boolean默认值：false注: 3.4版本开始支持。23. referMethod设置referMethod后上传图片的POST参数里有referMethod。数据类型：String默认值：空注: 3.4版本开始支持。24. dialogAlignType设置弹出框(dialog)的对齐类型，可设置page和空，指定page时按当前页面居中，指定空时按编辑器居中。数据类型：String默认值：page注: 3.4.1版本开始支持。25. imageUpload

13、Json指定上传图片的服务器端程序。数据类型：String默认值：././php/upload_json.php注: 3.4.1版本开始支持。26. fileManagerJson指定浏览远程图片的服务器端程序。数据类型：String默认值：././php/file_manager_json.php注: 3.4.1版本开始支持。27. shadowModetrue或false，true时弹出层显示阴影。数据类型：Boolean默认值：true注: 3.5版本开始支持。28. allowPreviewEmoticonstrue或false，true时鼠标放在表情上可以预览表情。数据类型：Bool

14、ean默认值：true注: 3.5版本开始支持。29. useContextmenutrue或false，true时使用自定义右键菜单，false时屏蔽自定义右键菜单。数据类型：Boolean默认值：true注: 3.5.3版本开始支持。30. syncType同步数据的方式，可设置,auto,form，值为auto时每次修改时都会同步，form时提交form时同步，空时不会自动同步。数据类型：String默认值：form注: 3.5.3版本开始支持。31. tabIndex编辑器的tabindex。数据类型：Int默认值：TEXTAREA输入框的tabindex注: 3.5.3版本开始支持。

15、32. afterChange编辑器内容发生变化后执行的回调函数。数据类型：Function默认值：无注: 3.5.3版本开始支持。33. afterTab按下TAB键后执行的的回调函数。数据类型：Function默认值： function(id) KE.util.setSelection(id); KE.util.insertHtml(id, );注: 3.5.3版本开始支持。34. afterFocus编辑器聚焦(focus)时执行的回调函数。数据类型：Function默认值：无注: 3.5.3版本开始支持。35. afterBlur编辑器失去焦点(blur)时执行的回调函数。数据类型：F

16、unction默认值：无注: 3.5.3版本开始支持。参数设置例子： KE.show( id : content_1, width : 70%, /编辑器的宽度为70% height : 200px, /编辑器的高度为100px filterMode : false, /不会过滤HTML代码 resizeMode : 1 /编辑器只能调整高度);1. 定义KE.langhello = 你好。 KE.langhello = 您好; 2. 定义KE.pluginhello，所有逻辑都在这个对象里，点击图标时默认执行click方法。 KE.pluginhello = click : function

17、(id) alert(您好); ; 3. 页面里添加图标定义CSS。 .ke-icon-hello background-image: url(./skins/default.gif); background-position: 0px -672px; width: 16px; height: 16px; 4. 最后调用编辑器时items数组里添加hello。 KE.show( id : content1, items : hello); 演示地址：在新窗口打开二、添加插入远程图片的插件1. 定义KE.langremote_image = 插入远程图片。 KE.langremote_image

18、 = 插入远程图片; 2. 定义KE.pluginremote_image。 KE.pluginremote_image = click : function(id) KE.util.selection(id); var dialog = new KE.dialog( id : id, cmd : remote_image, width : 310, height : 90, title : KE.langimage, yesButton : KE.langyes, noButton : KE.langno ); dialog.show(); , check : function(id) va

19、r dialogDoc = KE.util.getIframeDoc(KE.gid.dialog); var url = KE.$(url, dialogDoc).value; var title = KE.$(imgTitle, dialogDoc).value; var width = KE.$(imgWidth, dialogDoc).value; var height = KE.$(imgHeight, dialogDoc).value; var border = KE.$(imgBorder, dialogDoc).value; if (url.match(/.(jpg|jpeg|g

20、if|bmp|png)$/i) = null) alert(KE.langinvalidImg); window.focus(); KE.gid.yesButton.focus(); return false; if (width.match(/d+$/) = null) alert(KE.langinvalidWidth); window.focus(); KE.gid.yesButton.focus(); return false; if (height.match(/d+$/) = null) alert(KE.langinvalidHeight); window.focus(); KE

21、.gid.yesButton.focus(); return false; if (border.match(/d+$/) = null) alert(KE.langinvalidBorder); window.focus(); KE.gid.yesButton.focus(); return false; return true; , exec : function(id) KE.util.select(id); var iframeDoc = KE.gid.iframeDoc; var dialogDoc = KE.util.getIframeDoc(KE.gid.dialog); if

22、(!this.check(id) return false; var url = KE.$(url, dialogDoc).value; var title = KE.$(imgTitle, dialogDoc).value; var width = KE.$(imgWidth, dialogDoc).value; var height = KE.$(imgHeight, dialogDoc).value; var border = KE.$(imgBorder, dialogDoc).value; this.insert(id, url, title, width, height, bord

23、er); , insert : function(id, url, title, width, height, border) var html = 0) html += width= + width + ; if (height 0) html += height= + height + ; if (title) html += title= + title + ; html += alt= + title + ; html += border= + border + /; KE.util.insertHtml(id, html); KE.layout.hide(id); KE.util.f

24、ocus(id); ; 3. 页面里添加图标定义CSS。 .ke-icon-remote_image background-image: url(./skins/default.gif); background-position: 0px -496px; width: 16px; height: 16px; 4. 最后调用编辑器时items数组里添加remote_image。 KE.show( id : content1, items : remote_image); 演示地址：在新窗口打开、变量1. KE.scriptPathkindeditor.js的路径。数据类型：String2. KE

25、.browser浏览器类型和版本，分别为KE.browser.IE、KE.browser.WEBKIT、KE.browser.GECKO、KE.browser.OPERA、KE.browser.VERSION。数据类型：Object注：3.4以前版本直接返回字符串，分别为IE、WEBKIT、GECKO、OPERA。3. KE.gid.iframeDoc编辑区域的iframe对象。数据类型：Element4. KE.gid.keSel当前选中信息的KE.selection对象，id为编辑器ID。数据类型：Object5. KE.gid.keRange当前选中信息的KE.range对象，id为编辑

26、器ID。数据类型：Object6. KE.gid.sel当前选中信息的浏览器原生selection对象，id为编辑器ID。数据类型：Object7. KE.gid.range当前选中信息的浏览器原生range对象，id为编辑器ID。数据类型：Object二、函数1. KE.show(config)初始化并创建编辑器。执行本函数时先调用KE.init设置初始化参数，然后在DOM加载完成后执行KE.create。参数：config：Object，编辑器属性集合，具体请参考编辑器属性返回值：无2. KE.init(config)设置编辑器的初始化参数，loadStyleMode为true时自动加载C

27、SS文件。参数：config：Object，编辑器属性集合，具体请参考编辑器属性返回值：无3. KE.create(id, mode)创建编辑器。参数：id：String，编辑器的IDmode：Int，可选参数，指定1时在body下面创建编辑器，0或未指定时在TEXTAREA前面创建编辑器。返回值：无4. KE.remove(id, mode)移除编辑器。参数：id：String，编辑器的IDmode：Int，可选参数，指定1时移除在body下面的编辑器，0或未指定时移除在TEXTAREA前面的编辑器。返回值：无5. KE.html(id)取得编辑器的HTML内容。参数：id：String，编

28、辑器的ID返回值：String，HTML字符串注: 3.5版本开始支持，旧版本可以使用KE.util.getData(id)。6. KE.html(id, val)设置编辑器的HTML内容。参数：id：String，编辑器的IDval: String，HTML字符串返回值：无注: 3.5版本开始支持，旧版本可以使用KE.util.setFullHtml(id, val)。7. KE.text(id)取得编辑器的纯文本内容。参数：id：String，编辑器的ID返回值：String，去除HTML代码后的文本注: 3.5版本开始支持。8. KE.text(id, val)设置编辑器的内容，直接显示HTML代码。参数：id：String，编辑器的IDval: String