kindeditor图片上传并且图片自动适应编辑器大小

使用kindeditor上传图片

使kindeditor中的图片适应编辑器大小

作者:kiss小祥   QQ 244556979

语言:java jsp里使用

版本:4.1.7  2013421发布的,最新版哦

公司做博文发布系统,需要一个在线所见即所得的编辑器,找了好多 比如ckediterewebediterkindeditorueditor。。。

最后还是选择了kindeditor。只因为看它顺眼。恩。。就是顺眼。

关于kindeditor的使用我就不说了,官网有详细的中文介绍,主要说一下使用过程中的问题。

错误一

上传图片的时候按照官网的配置,总是报上传错误。

当我满怀欣喜的下载下来,并且按照配置配置好了。。。然后就伤了

以下为我的编辑器配置:

KindEditor.ready(function(K) {

  window.editor = K.create("#content",{

//上传程序(是一段写在jsp里面的上传代码)

 uploadJson : '../editor/jsp/upload_json.jsp',

//文件管理程序(获取文件、图片列表,并显示)

 fileManagerJson : '../editor/jsp/file_manager_json.jsp',

//可以设置是否显示图片空间按钮(不安全,发布到互联网以后不建议显示)

 allowFileManager : false,

//按钮组

 items:[

           'forecolor', 'hilitecolor', 'bold','italic', 'underline',  'removeformat', 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: KindEditor编辑器可以通过以下步骤上多张图片: 1. 点击编辑器中的“插入图片”按钮。 2. 在弹出的对话框中,选择“上图片”选项卡。 3. 点击“选择文件”按钮,选择要上图片文件。 4. 重复步骤3,选择多张图片文件。 5. 点击“开始上”按钮,等待上完成。 6. 上完成后,可以在“已上图片”选项卡中查看已上图片。 7. 选中要插入的图片,点击“确定”按钮即可插入到编辑器中。 注意:上多张图片时,需要等待每张图片完成后再选择下一张图片,否则可能会导致上失败。 ### 回答2: kindeditor是一款非常常用的富文本编辑器,它不仅提供了基本的文本编辑功能,而且还支持上多张图片的功能。下面就详细介绍一下如何使用kindeditor多张图片。 1. 准备工作 首先,在使用kindeditor多张图片之前,我们需要先准备好以下内容: ① kindeditor编辑器文件 ② kindeditor图片的处理程序文件,这个一般是后台开发人员编写的 ③ 存储上图片的文件夹,这个一般由后台开发人员在处理程序中设置。 2. 设置kindeditor编辑器 在前端页面中,我们需要先引入kindeditor编辑器的相关文件。这些文件一般包括kindeditor.js和kindeditor.css等。引入之后,我们需要对kindeditor进行一些基本设置,如设置编辑器的宽度、高度等。同时,还需要在配置文件中设置上图片的选项。 其中,设置上图片的选项需要设置上图片的处理程序地址、允许上图片类型、最大可以上图片大小、是否可以上多张图片等。 3. 编写后端处理程序 在上图片的处理程序中,我们一般需要在程序中编写以下基本功能: ① 判断上的文件是否合法,包括文件类型是否允许上、文件大小是否在规定范围内等。 ② 将上图片保存到指定文件夹中。 ③ 返回上结果,一般是返回上图片地址或者上失败的原因等。 4. 使用 在前端页面中,我们可以通过点击上图片按钮来触发上图片的功能。在点击上图片按钮后,会弹出选择图片的对话框,我们可以选择多张图片,然后分别进行上。上完成后,可以在编辑器中看到上图片。 总的来说,kindeditor多张图片的功能非常实用,可以让我们的文章或网站更加丰富和有趣。同时,对于后端开发人员来说,也需要注意上图片的文件类型和大小等问题,以确保上图片的安全性和稳定性。 ### 回答3: KindEditor是一款基于jQuery和Zlib的网页富文本编辑器,它支持表格、混合开发、超过40种已配置的插件、代码自动提示与补全。在KindEditor中,用户可以方便地插入各类多媒体元素,包括图片、音视频等。也就是说,在KindEditor中上多张图片非常容易。 具体的上过程可以分为以下几个步骤: 1. 在前端页面中添加一个文件上控件,例如: <input type="file" id="file" name="file" multiple/> 其中,multiple属性表示可以选择多个文件进行上。 2. 在JavaScript中添加上代码。使用KindEditor自带的uploadJson接口可以实现多张图片的上KindEditor.ready(function(K) { var editor = K.editor({ // 设置上接口 uploadJson: '/upload_json.php', fileManagerJson: '/file_manager_json.php' }); K('#upload_img_btn').click(function() { editor.loadPlugin('multiimage', function() { // 打开上多张图片的窗口 editor.plugin.multiImageDialog({ clickFn: function(data) { // 上成功后执行的回调函数 } }); }); }); }); 在上述代码中,uploadJson属性设置上接口,multiImageDialog方法打开多张图片的窗口。 3. 在服务器端编写PHP代码处理上请求。具体的实现方式因不同的后端语言而异,在PHP中,可以使用$_FILE数组来处理上文件。例如: if(!empty($_FILES['file']['name'])) { $fileArr = $_FILES['file']; for($i=0; $i<count($fileArr['name']); $i++) { $tmp_name = $fileArr['tmp_name'][$i]; $name = $fileArr['name'][$i]; // 保存文件到指定目录 move_uploaded_file($tmp_name, 'uploads/'.$name); $urlArr[] = 'uploads/'.$name; } echo json_encode(array('error' => 0, 'data' => $urlArr)); } 其中,$fileArr为上的文件数组,$urlArr保存上成功后每个文件的URL地址。 综上所述,KindEditor编辑器多张图片的步骤包括前端文件上控件的添加、JavaScript上代码的编写以及后端服务器代码的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值