课题_kindeditor使用方法

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

2、须转换HTML特殊字符(>,<,&,")。 具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。 <textarea id="editor_id" name="content" style="width:700px;height:300px;">&lt;strong&gt;HTML内容&lt;/strong&gt;</textarea> 4.在该HTML页面添加以下脚本。 <scr

3、ipt charset="utf-8" src="/editor/kindeditor.js"></script><script>        KE.show(                id : 'editor_id'     

4、0;  );</script>注：KE.show的原理是先执行KE.init设置一些变量，等DOM全部创建以后才开始执行KE.create创建编辑器。 如果浏览器不触发DOMContentLoaded事件（例如：jQuery的$.ready，点击某个按钮，通过innerHTML插入HTML等），则不能使用KE.show，需要直接调用KE.init和KE.create。 KE.init(        id : 'editor_id');$.ready(function() &#

5、160;       KE.create('editor_id'););调用KE.show和KE.init时，除id之外还可以设置其它的参数，具体属性请参考编辑器初始化参数。 5.取得编辑器的HTML内容。 KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将HTML数据同步到原来的textarea，KE.sync函数会完成这个动作。 KindEditor在默认情况下自动寻找textarea所属的form元素，找到f

6、orm后onsubmit事件里添加KE.sync函数，所以用form方式提交数据，不需要手动执行KE.sync函数。 /取得HTML内容html = KE.html('editor_id');/同步数据后可以直接取得textarea的valueKE.sync('editor_id');html = document.getElementById('editor_id').value;html = $('#editor_id').val(); /jQuery/设置HTML内容KE.html('editor_id&#

7、39;, 'HTML内容'); 编辑器初始化参数 1.调用KE.show或KE.init时可以设置以下参数。 1.id TEXTAREA输入框的ID，必须设置。 数据类型：String 2.items 配置编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。 数据类型：Array 默认值： 'source', '|', 'fullscreen', 'undo', 'redo',

8、'print', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'out

9、dent', 'subscript','superscript', '|', 'selectall', '-','title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold','italic', 'underline', 'strikethrough', 'remove

10、format', '|', 'image','flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about' 3.width 编辑器的宽度，可以设置px或%，比TEXTAREA输入框样式表宽度优先度高。 数据类型：String 默认值：TEXTAREA输入框的宽度 注:

11、3.2版本开始支持。 4.height 编辑器的高度，只能设置px，比TEXTAREA输入框样式表高度优先度高。 数据类型：String 默认值：TEXTAREA输入框的高度 注: 3.2版本开始支持。 5.minWidth 数据类型：Int 指定编辑器最小宽度，单位为px。 默认值：200 6.minHeight 数据类型：Int 指定编辑器最小高度，单位为px。 默认值：100 7.filterMode 数据类型：Boolean t

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

13、9;, '.background-color',        span : 'style',        div : 'class', 'align', 'style',        table: 'class', 'border', 'cellspacing&#

14、39;, 'cellpadding', 'width', 'height', 'align', 'style',        'td,th': 'class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',

15、'style',        a : 'class', 'href', 'target', 'name', 'style',        embed : 'src', 'width', 'height', 'type', 'loop', 'autostart',

16、'quality',        'style', 'align', 'allowscriptaccess', '/',        img : 'src', 'width', 'height', 'border', 'alt', 'title', 'align'

17、, 'style', '/',        hr : 'class', '/',        br : '/',        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : 'align', 'style',

18、0;       'tbody,tr,strong,b,sub,sup,em,i,u,strike' : 注：filterMode为true时有效。3.4版本开始属性可设置style，保留所有inline样式。 9.resizeMode 2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。 数据类型：Int 默认值：2 10.skinType 风格类型，default 数据类型：String 默认值：default

19、60;11.wyswygMode 可视化模式或代码模式 数据类型：Boolean 默认值：true 12.cssPath 指定编辑器iframe document的CSS，用于设置可视化区域的样式。 数据类型：String或Array 默认值：空 注：3.4.1版本开始可指定多个CSS文件。例如：cssPath : 'a.css', 'b.css' 13.skinsPath 指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。 数

20、据类型：String 默认值：KE.scriptPath + 'skins/' 14.pluginsPath 指定编辑器的plugins目录。 数据类型：String 默认值：KE.scriptPath + 'plugins/' 15.minChangeSize undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。 数据类型：Int 默认值：5 16.loadStyleMode true时自动加载编辑器的CSS

21、。 数据类型：Boolean 默认值：true 注: 3.4版本开始支持。 17.urlType 改变站内本地URL，可设置空、relative、absolute、domain。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。 数据类型：String 默认值：空 注: 3.4版本开始支持，3.4.1版本开始默认值为空。 18.newlineTag 设置回车换行标签，可设置p、br。 数据类型：String 默认值：br

22、 注: 3.4版本开始支持。 19.afterCreate 设置编辑器创建后执行的回调函数。 数据类型：Function 默认值：无 20.afterDialogCreate 设置弹出浮动框创建后执行的回调函数。 数据类型：Function 默认值：无 注: 3.4.3版本开始支持。 21.allowUpload true或false，true时显示上传图片标签。 数据类型：Boolean 默认值：true 注: 3.4版本开始支持。 

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

24、中。 数据类型：String 默认值：page 注: 3.4.1版本开始支持。 25.imageUploadJson 指定上传图片的服务器端程序。 数据类型：String 默认值：././php/upload_json.php 注: 3.4.1版本开始支持。 26.fileManagerJson 指定浏览远程图片的服务器端程序。 数据类型：String 默认值：././php/file_manager_json.php 注: 3.4.1版本开始支持。 27

25、.shadowMode true或false，true时弹出层显示阴影。 数据类型：Boolean 默认值：true 注: 3.5版本开始支持。 28.allowPreviewEmoticons true或false，true时鼠标放在表情上可以预览表情。 数据类型：Boolean 默认值：true 注: 3.5版本开始支持。 29.useContextmenu true或false，true时使用自定义右键菜单，false时屏蔽自定义右键菜单。 数据类型：Boolean&#

26、160;默认值：true 注: 3.5.3版本开始支持。 30.syncType 同步数据的方式，可设置"","auto","form"，值为"auto"时每次修改时都会同步，"form"时提交form时同步，空时不会自动同步。 数据类型：String 默认值："form" 注: 3.5.3版本开始支持。 31.tabIndex 编辑器的tabindex。 数据类型：Int 默

27、认值：TEXTAREA输入框的tabindex 注: 3.5.3版本开始支持。 32.afterChange 编辑器内容发生变化后执行的回调函数。 数据类型：Function 默认值：无 注: 3.5.3版本开始支持。 33.afterTab 按下TAB键后执行的的回调函数。 数据类型：Function 默认值： function(id)         KE.util.setSelection(id);  

28、;      KE.util.insertHtml(id, '    ');注: 3.5.3版本开始支持。 34.afterFocus 编辑器聚焦(focus)时执行的回调函数。 数据类型：Function 默认值：无 注: 3.5.3版本开始支持。 35.afterBlur 编辑器失去焦点(blur)时执行的回调函数。 数据类型：Function 默认值：无 注: 3.5.3版本开始支持。 

29、;参数设置例子： KE.show(        id : "content_1",        width : "70%", /编辑器的宽度为70%        height : "200px", /编辑器的高度为100px        filterM

30、ode : false, /不会过滤HTML代码        resizeMode : 1 /编辑器只能调整高度); 一、添加"你好"插件 1. 定义KE.lang'hello' = "你好"。 KE.lang'hello' = "您好"          2.定义KE.plugin'hello'，

31、所有逻辑都在这个对象里，点击图标时默认执行click方法。 KE.plugin'hello' =     click : function(id)         alert("您好");    ;          3.页面里添加图标定义CSS。 .ke-icon-hello     

32、60; background-image: url(./skins/default.gif);      background-position: 0px -672px;      width: 16px;      height: 16px;          4.最后调用编辑器时items数组里添加hello。 KE.show( &#

33、160;  id : 'content1',    items : 'hello');           演示地址：在新窗口打开 二、添加插入远程图片的插件 1. 定义KE.lang'remote_image' = "插入远程图片"。 KE.lang'remote_image' = "插入远程图片"   

34、;       2.定义KE.plugin'remote_image'。 KE.plugin'remote_image' =     click : function(id)         KE.util.selection(id);        var dialog = new KE.dialog(  

35、;          id : id,            cmd : 'remote_image',            width : 310,          &

36、#160; height : 90,            title : KE.lang'image',            yesButton : KE.lang'yes',            noButton : KE.lan

37、g'no'        );        dialog.show();    ,    check : function(id)         var dialogDoc = KE.util.getIframeDoc(KE.gid.dialog);     

38、   var url = KE.$('url', dialogDoc).value;        var title = KE.$('imgTitle', dialogDoc).value;        var width = KE.$('imgWidth', dialogDoc).value;        var

39、 height = KE.$('imgHeight', dialogDoc).value;        var border = KE.$('imgBorder', dialogDoc).value;        if (url.match(/.(jpg|jpeg|gif|bmp|png)$/i) = null)          

40、   alert(KE.lang'invalidImg');            window.focus();            KE.gid.yesButton.focus();            return fals

41、e;                if (width.match(/d+$/) = null)             alert(KE.lang'invalidWidth');            window.foc

42、us();            KE.gid.yesButton.focus();            return false;                if (height.match(/d+$/) = null)  

43、;           alert(KE.lang'invalidHeight');            window.focus();            KE.gid.yesButton.focus();    &#

44、160;       return false;                if (border.match(/d+$/) = null)             alert(KE.lang'invalidBorder');    

45、;        window.focus();            KE.gid.yesButton.focus();            return false;            &#

46、160;   return true;    ,    exec : function(id)         KE.util.select(id);        var iframeDoc = KE.gid.iframeDoc;        var dialogDoc = KE.util.getIfra

47、meDoc(KE.gid.dialog);        if (!this.check(id) return false;        var url = KE.$('url', dialogDoc).value;        var title = KE.$('imgTitle', dialogDoc).value;  

48、0;     var width = KE.$('imgWidth', dialogDoc).value;        var height = KE.$('imgHeight', dialogDoc).value;        var border = KE.$('imgBorder', dialogDoc).value;   

49、60;    this.insert(id, url, title, width, height, border);    ,    insert : function(id, url, title, width, height, border)         var html = '<img src="' + url + '" '        if (width > 0) html += 'width="' + width + '" '        if (height > 0) html += 'height="' + height + '" '        if (title)