《kindeditor4使用文档》由会员分享,可在线阅读,更多相关《kindeditor4使用文档(131页珍藏版)》请在金锄头文库上搜索。
1、KindEditor 4.x 文档编辑器使用方法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输入框。&
2、lt;strong>HTML内容</strong>Note id在当前页面必须是唯一的值。 在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。 在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。2. 在该HTML页面添加以下脚本。 var editor; KindEdi
3、tor.ready(function(K) editor = K.create(#editor_id); );Note 第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。 通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。var options = cssPath : /css/index.css, filterMode : true;var editor = K.create(textareaname=content, options);4. 获取HTML数据/ 取得HTML内容html = editor.ht
4、ml();/ 同步数据后可以直接取得textarea的valueeditor.sync();html = document.getElementById(editor_id).value; / 原生APIhtml = K(#editor_id).val(); / KindEditor Node APIhtml = $(#editor_id).val(); / jQuery/ 设置HTML内容editor.html(HTML内容);Note KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数
5、据设置到原来的textarea。 KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。编辑器初始化参数Contents 编辑器初始化参数o widtho heighto minWidtho minHeighto itemso noDisableItemso filterModeo htmlTagso wellFormatModeo resizeTypeo themeTypeo langTypeo designModeo fullscreenModeo bas
6、ePatho themesPatho pluginsPatho langPatho minChangeSizeo urlTypeo newlineTago pasteTypeo dialogAlignTypeo shadowModeo useContextmenuo syncTypeo indentCharo cssPatho cssDatao bodyClasso colorTableo afterCreateo afterChangeo afterTabo afterFocuso afterBluro afterUploado uploadJsono fileManagerJsono al
7、lowPreviewEmoticonso allowImageUploado allowFlashUploado allowMediaUploado allowFileUploado allowFileManagero fontSizeTableo imageTabIndexo formatUploadUrlo fullscreenShortcuto extraFileUploadParamso filePostNameo fillDescAfterUploadImageo afterSelectFilewidth编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高。 数
8、据类型: String 默认值: textarea输入框的宽度示例:K.create(#id, width : 700px);height编辑器的高度,只能设置px,比textarea输入框样式表高度优先度高。 数据类型: String 默认值: textarea输入框的高度minWidth指定编辑器最小宽度,单位为px。 数据类型: Int 默认值: 650minHeight指定编辑器最小高度,单位为px。 数据类型: Int 默认值: 100items配置编辑器的工具栏,其中”/”表示换行,”|”表示分隔符。 数据类型: Array 默认值: source, |, undo, redo,
9、|, preview, print, template, code, cut, copy, paste, plainpaste, wordpaste, |, justifyleft, justifycenter, justifyright, justifyfull, insertorderedlist, insertunorderedlist, indent, outdent, subscript, superscript, clearhtml, quickformat, selectall, |, fullscreen, /, formatblock, fontname, fontsize,
10、 |, forecolor, hilitecolor, bold, italic, underline, strikethrough, lineheight, removeformat, |, image, multiimage, flash, media, insertfile, table, hr, emoticons, baidumap, pagebreak, anchor, link, unlink, |, aboutsourceHTML代码preview预览undo后退redo前进cut剪切copy复制paste粘贴plainpaste粘贴为无格式文本wordpaste从Word粘贴
11、selectall全选justifyleft左对齐justifycenter居中justifyright右对齐justifyfull两端对齐insertorderedlist编号insertunorderedlist项目符号indent增加缩进outdent减少缩进subscript下标superscript上标formatblock段落fontname字体fontsize文字大小forecolor文字颜色hilitecolor文字背景bold粗体italic斜体underline下划线strikethrough删除线removeformat删除格式image图片flashFlashmedia
12、视音频table表格hr插入横线emoticons插入表情link超级链接unlink取消超级链接fullscreen全屏显示about关于print打印code插入程序代码mapGoogle地图baidumap百度地图lineheight行距clearhtml清理HTML代码pagebreak插入分页符quickformat一键排版insertfile插入文件template插入模板anchor插入锚点noDisableItemsdesignMode 为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, .background-color, span : .color, .backg