kindeditor上传图片后,自动缩放超出指定尺寸(宽高)的图片,不超过的则显示原图。
如下图中所示,指定宽度为600px,第一张小图宽不超过则显示原图,第二张大图宽超过则将宽缩放为600px。
kindeditor点击上传图片按钮,默认显示标签为“本地上传”功能。实现效果如下图:
kindeditor富文本编辑器点击上传图片按钮,在弹出的窗口中去掉上传网络图片的功能,只留下本地上传,如图:
KindEditor批量图片上传,默认允许用户同时上传20张图片,单张图片容量不超过1MB。
KindEditor编辑器上传文件是没有用户登录验证和权限验证的,即任何人都可以上传,这样很不安全,会有文件上传漏洞。于是,我们就需要加一个权限验证了。
以下是KindEditor 4.1.11的ASP接口示例:
KindEditor中单个图片及文件上传,可以直接在 KindEditor/asp/upload_json.asp 这个文件顶部加入如下代码:
<% '……省略包含文件及打开数据库和DB函数的代码 if len(request.Cookies("username"))>0 and len(request.Cookies("password"))>0 then dim rs Set Rs = DB("Select [password] From [Admin] Where [Username]='" & username & "'",1) If Not Rs.Eof Then if rs(0)<>password then response.End() else response.End() End If : Rs.Close else response.End() end if %>
说明:单个图片及文件上传时,upload_json.asp文件可以获取cookies和session,因此可以直接写入验证程序。
KindEditor上传图片及其它文件后,自动将生成的新路径保存到数据库表中,以方便我们对已上传的文件进行后台管理。
以下是KindEditor 4.1.11的ASP接口示例:
修改 KindEditor/asp/upload_json.asp 文件中以下代码段:
set result = file.saveToFile(savePath, 0, true) if result.error then showError(file.Exception) else '以下代码就是将文件URL存入数据库Upload表中,可根据自己的程序要求编写代码 call db("Insert into [Upload] ([url]) values ('" & savePath & file.filename)& "')", 0) end if
KindEditor编辑器本地上传图片文件后(单个图片上传和批量图片上传),将数据回调,以实现自由设置任何一张图片做为文章形象图且在指定区域展示此形象图的功能。
以下是KindEditor 4.1.11的示例代码:
如果发布内容时只用一个KindEditor编辑器的话,可以开启自动调整高度功能,若用了多个的话,个人建议还是不要开启为好,以免查看和操作都比较麻烦。
默认不开启。
<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script> <script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ autoHeightMode : true, afterCreate : function() { this.loadPlugin('autoheight'); } }); }); </script> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
在我们使用编辑器的时候经常会想让编辑器里上传的某张图片设定为文章的形象图,这时我们可以用到单独的“浏览服务器”这个按钮功能。
以下是KindEditor 4.1.11的示例代码:
使用KindEditor编辑器创建内容区,想让表单即可以点提交按钮提交表单也可以按Ctrl+Enter回车键提交表单。
以下是KindEditor 4.1.11测试代码实例(部分HTML代码省略):
<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script> <script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ filterMode : false, //过滤HTML代码 allowFileManager : true, //浏览图片空间 afterCreate : function() { //设置编辑器创建后执行的回调函数 var self = this; //Ctrl+Enter提交表单 K.ctrl(document, 13, function() { self.sync(); K('#form')[0].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); K('#form')[0].submit(); }); } }); }); </script> <form> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea> </form>
allowFileManager : true
true时显示浏览远程服务器按钮,false时不显示浏览远程服务器按钮。
默认值: false
让KindEditor编辑器一加载完就默认在HTML代码模式下,除了HTML代码图标是亮的,其它图标都是灰色的。点击HTML代码图标可切换为可视化模式。
designMode : false
true可视化模式,false代码模式。
默认值: true
filterMode : false
true时根据 htmlTags 过滤HTML代码,false时允许输入任何代码。
默认值: true
<script> var KE; KindEditor.ready(function(K) { KE = K.create('#content',{ filterMode : false }); }); </script> <textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
useContextmenu : true
true时使用右键菜单,false时屏蔽右键菜单。
默认值: true