KindEditor 4.x 在线编辑器常用方法小结

jQuery方式创建编辑器 KindEditor.create(\’#nr\’); //绑定指定ID。 HTML部门 <textarea id=\”nr\” style=\”width:680px;height:280px;visibility:visible\”></textarea> ———————————————————————————- allowFileManager 【是否允许浏览服务器已上传文件】默认值是：false —————————————————— allowImageUpload 【是否允许上传本地图片】默认值是：true ———————————————- allowFlashUpload 【是否允许上传Flash】默认值是：true ———————————————- allowMediaUpload 【是否允许上传多媒体文件】默认值是：true ———————————————— pasteType 【设置粘贴类型】 0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴（默认） ————————————————— resizeType 【设置可否改变编辑器大小】 0:不能改变 1:只能改变高度 2:宽度和高度都可以改变（默认） ———————————————————- themeType 【主题风格】可设置\”default\”、\”simple\”，指定simple时需要引入simple.css ————————————————————- designMode 【可视化模式或代码模式】数据类型：Boolean 默认值是：true(可视化) —————————————— afterCreate:function(){} 【编辑器创建后】 afterCreate:function(){ //alert(\’创建完成\’); } —————————————— fontSizeTable 【制定文字大小】数据类型：Array 默认值：[\’9px\’, \’10px\’, \’12px\’, \’14px\’, \’16px\’, \’18px\’, \’24px\’, \’32px\’] ———————————————————————– colorTable 【指定取色器里的颜色值】数据类型：Array [ [\’#E53333\’, \’#E56600\’, \’#FF9900\’, \’#64451D\’, \’#DFC5A4\’, \’#FFE500\’], [\’#009900\’, \’#006600\’, \’#99BB00\’, \’#B8D100\’, \’#60D978\’, \’#00D5FF\’], [\’#337FE5\’, \’#003399\’, \’#4C33E5\’, \’#9933E5\’, \’#CC33E5\’, \’#EE33EE\’], [\’#FFFFFF\’, \’#CCCCCC\’, \’#999999\’, \’#666666\’, \’#333333\’, \’#000000\’] ] 上面是默认值 ———————————————————————————- 【Ctrl+Enter提交】 afterCreate:function(){ var self=this; KindEditor.ctrl(self.edit.doc, 13, function() { self.sync(); //执行其他事件 }); } ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ var editor=KindEditor.create(\’#nr\’); 【编辑器获取焦点】 editor.focus(); 【取得编辑器HTML内容】 var html=editor.html(); 【取得编辑器纯文本内容】 var text=editor.text(); 【移除编辑器】 editor.remove(); 【设置编辑器HTML】 editor.html(\'<strong>编辑器内容</strong>\’); 【设置编辑器纯文本内容，直接显示HTML代码】 editor.text(\'<strong>编辑器内容</strong>\’); 【判断编辑器内容是否为空】 if(editor.isEmpty()){ alert(\’请输入内容\’); return false; } 【将指定的HTML内容插入到编辑器区域里的光标处】 editor.insertHtml(\'<strong>插入内容</strong>\’); 【将指定的HTML内容添加到编辑器区域的最后位置。】 editor.appendHtml(\'<strong>追加内容</strong>\’); 【编辑器切换全屏模式】 editor.fullscreen(); 【设置编辑器的只读状态】 editor.readonly(false); //true:只读，false:取消只读 ================================================================================== 【浏览服务器】选择已上传的文件 ① 必须先引用编辑器的default.css文件 <link rel=\”stylesheet\” type=\”text/css\” href=\”../Editor/themes/default/default.css\” /> ② 必须引用一下两个JavaScript文件 <script type=\”text/javascript\” src=\”../Editor/kindeditor-min.js\”></script> <script type=\”text/javascript\” src=\”../Editor/lang/zh_CN.js\”></script> ③ 具体实现方法复制代码代码如下:<script type=\”text/javascript\”> $(function(){ var editor = KindEditor.editor(); $(\’#filemanager\’).click(function() { editor.loadPlugin(\’filemanager\’, function() { //加载插件 editor.plugin.filemanagerDialog({ viewType : \’VIEW\’, //显示方式，有两种分别是VIEW（缩略图）和LIST（详细信息） dirName : \’image\’, //选择查看的指定文件夹下的文件【包括子目录下的文件】，默认只能是image,flash,media,file四种，如需添加自定义文件夹，可修改例如：asp/file_manager_json.asp文件第40行。 clickFn : function(url, title) { //选择玩文件后执行下面的代码 $(\’#url\’).val(url); editor.hideDialog(); //隐藏浏览服务器对话框 } }); }); }); }); </script> 【上传本地文件到服务器】 ① 引用CSS文件 <link rel=\”stylesheet\” type=\”text/css\” href=\”../Editor/themes/default/default.css\” /> ② 引用编辑器JavaScript文件 <script type=\”text/javascript\” src=\”../Editor/kindeditor-min.js\”></script> ③ 具体实现方法复制代码代码如下:<script type=\”text/javascript\”> $(function(){ var uploadbutton = KindEditor.uploadbutton({ button : KindEditor(\’#upload\’), //注意此处，不能使用jQuery的$ fieldName : \’imgFile\’, //不要修改 url : \’../Editor/asp/upload_json.asp?dir=file\’, //上传处理程序页面，dir参数有四种:flash,media,file,其他（图片），上传后缀限制可修改程序页面代码，如：upload_json.asp afterUpload : function(data) { if (data.error === 0) { var url = KindEditor.formatUrl(data.url, \’absolute\’); $(\’#url\’).val(url); } else { alert(data.message); } }, afterError : function(str) { alert(\’上传发送错误！\’); //如果需要显示错误信息，可设置如alert(\’发生错误：\’+str);，如不需显示可将上面str删除 } }); uploadbutton.fileBox.change(function(e) { uploadbutton.submit(); }); }); </script> 【上传图片】包括选择服务器已上传的图片 ① 引用CSS文件 <link rel=\”stylesheet\” type=\”text/css\” href=\”../Editor/themes/default/default.css\” /> ② 引用编辑器JavaScript文件 <script type=\”text/javascript\” src=\”../Editor/kindeditor-min.js\”></script> ③ 引用语言包文件，必须的 <script type=\”text/javascript\” src=\”../Editor/lang/zh_CN.js\”></script> ④ 具体实现方法复制代码代码如下:<script type=\”text/javascript\”> $(function(){ var editor = KindEditor.editor({ allowFileManager : true //允许选择已上传的图片 }); $(\’#image\’).click(function() { editor.loadPlugin(\’image\’, function() { editor.plugin.imageDialog({ imageUrl : $(\’#url\’).val(), clickFn : function(url, title, width, height, border, align) { $(\’#url\’).val(url); //可使用其他参数。 editor.hideDialog(); } }); }); }); }); </script> http://www.cnblogs.com/edielei/archive/2011/11/12/2246450.html

您可能感兴趣的文章: