kindeditor编辑器复制粘贴图片上传

最新推荐文章于 2024-07-23 10:29:03 发布
最新推荐文章于 2024-07-23 10:29:03 发布
阅读量316 收藏
点赞数
分类专栏： word图片复制粘贴上传 文章标签： javascript css vue.js html html5
原文链接：https://www.cnblogs.com/zyzzz/p/14973700.html
版权

这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用

后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@

     page contentType="text/html;charset=utf-8"%><%@

     page import = "Xproer.*" %><%@

     page import="org.apache.commons.lang.StringUtils" %><%@

     page import="org.apache.commons.fileupload.*" %><%@

     page import="org.apache.commons.fileupload.disk.*" %><%@

     page import="org.apache.commons.fileupload.servlet.*" %><%

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try

{

     files = upload.parseRequest(request);

}

catch (FileUploadException e)

{

    out.println("上传文件异常："+e.toString());

    return;

}

FileItem imgFile = null;

Iterator fileItr = files.iterator();

while (fileItr.hasNext())

{

     imgFile = (FileItem) fileItr.next();

     if(imgFile.isFormField())

     {

         String fn = imgFile.getFieldName();

         String fv = imgFile.getString();

         if(fn.equals("uname")) uname = fv;

         if(fn.equals("upass")) upass = fv;

     }

     else

     {

         break;

     }

}

Uploader up = new Uploader(pageContext,request);

up.SaveFile(imgFile);

String url = up.GetFilePathRel();

out.write(url);

response.setHeader("Content-Length",url.length()+"");

%>

配置web.xml

 <?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>

  </welcome-file-list>

</web-app>

前端（页面）测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

     <title>WordPaster-jsp-ueditor-1.2.6.0</title>

     <script type="text/javascript" src="ueditor.config.js" charset="utf-8"></script>

     <script type="text/javascript" src="ueditor.all.min.js" charset="utf-8"></script>

     <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>

    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />

    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.edge.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.app.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.file.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>

</head>

<body>

     <textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>

     <script type="text/javascript">

        var pasterMgr = new WordPasterManager();

        //pasterMgr.Config["PostUrl"] = "http://www.ncmem.com/products/upload_ori.aspx"

    pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"

    //pasterMgr.Config["PostUrl"] = "http://cloud.dyso.cn/ueditor/upload.jsp"

    pasterMgr.Load();//加载控件

        var ue = UE.getEditor('myEditor');

        

         ue.ready(function() {

             //设置编辑器的内容

             ue.setContent('hello');

             //获取html内容，返回: <p>hello</p>

             var html = ue.getContent();

             //获取纯文本内容，返回: hello

             var txt = ue.getContentTxt();

             pasterMgr.SetEditor(ue);

         });

                  

     </script>

</body>

</html>

实现后的效果，能够批量上传word中的全部图片，大幅度提升图片上传效率。而且能够保留Word样式。

图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了，

所有代码已经全部传到网上，有需要的朋友可以直接下载使用，http://blog.ncmem.com/wordpress/2019/08/07/javaword图片上传控件/

讨论群：223813913

Mr_Zang666
关注
专栏目录
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
cwhatiscs的专栏
04-19 2194
公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器（在线富文本编辑器）中。Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧 ？ 我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布 网上找了很久，大部分都有一些不成熟的问题，皇天不负有心人终于让我找到了一个成熟的项目。 1、前台页面引用代码...
kindEditor+图片批量上传
04-05
用户可以通过简单的拖拽或者复制粘贴方式，将Word文档中的图片快速导入到编辑器中，大大简化了工作流程。更值得一提的是，这个工具特别贴心地支持直接从Word中拷贝包含数学公式的段落，它会自动识别并转换这些公式为...
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传
10-12
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富文本里面，再上传给后台
Kind Editor 编辑器 图片上传
fulerbakesi
06-13 136
KindEditor 编辑器 图片上传 最近接触到了html文本的存储。 以前没有涉及这么全面的html + 图片 上传。 今天用KindEditor 做了一些功能。 我的项目用spring mvc+mybatis 整的。 贴出我的前端和后端代码 。供新手参考。 不用多余jar。 跟普通上传图片差不多。 前端js代码 var editor; KindEditor.read...
KINDEDITOR直接粘贴图片实现
最新发布
alisky119的博客
07-23 585
支持复制粘贴WORD公式的KINDEDITOR编辑器，KindEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片，编辑器用的是KindEditor，需要为KindEditor增加复制粘贴图片的功能，复制word图片，复制本地图片，复制后粘贴到编辑器中，自动上传到服务器中。返回图片地址HTML，编辑器：FCKEditor，CKEditor，KindEditor，UEditor，TinyMCE，wangEditor，xhEditor，eWebEditor，JMEditor，CuteEditor，
Kindeditor图片粘贴上传(chrome)
weixin_30735745的博客
09-28 464
首先要赞一下kindeditor，一个十分强大的国产开源web-editor组件。 kindeditor4.1.x版本已支持图片批量上传，不过传统的选文件上传的方式依然效率低下。 很多时候，编辑人员可能需要将一个文档中图片上传到网上，那么，按照传统的上传方法，他必须先将图片另存为到本机，再用编辑器的上传选择文件进行上传。 这个过程至少要做这几个动作：在文档中图片上点右键 ->...
KINDEDITOR编辑器复制粘贴图片上传
alisky119的博客
04-01 799
编辑器用的是KindEditor，需要为KindEditor增加复制粘贴图片的功能，复制word图片，复制本地图片，复制后粘贴到编辑器中，自动上传到服务器中。返回图片地址HTML，PostUrl请使用完整路径（http://www.qq.com/upload.jsp），不要使用相对路径（/upload.jsp）。需要为KindEditor编辑器增加粘贴Word图片的功能，粘贴后图片能够自动上传到服务器中，服务器地址能够自定义。用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，可以说是高频使用，
kindeditor编辑器word图片粘贴上传
11-07
在本主题“KindEditor编辑器Word图片粘贴上传”中，我们将深入探讨如何利用KindEditor的功能从Word文档中复制并上传图片至Web服务器。 首先，理解这个过程的关键在于编辑器的图片粘贴功能。在Word中，用户经常需要...
优化kindeditor，修改flash批量上传图片方式为H5上传，添加第三方视频代码功能，添加手机尺寸预览，粘
01-18
KindEditor是一款广泛应用于Web开发中的开源富文本编辑器，它提供了丰富的编辑功能，使得用户可以在网页上方便地创建和编辑内容。在这个优化过程中，我们主要关注了以下几个方面： 1. **Flash批量上传图片向H5上传...
kindeditor实现粘贴上传图片
qq_37896260的博客
07-29 776
这里写自定义目录标题kindeditor试下粘贴上传图片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 kindeditor试下粘贴上传图片 //定义编辑器对象 var editor; //异步加载编辑器 $.getScript('../kindeditor/kindeditor.js', funct
kindeditor编辑器上传图片
angzhuo9931的博客
11-26 145
使用的是asp.net MVC 上传图片。 1.下载Kindeditor的对应的包 2.html页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"...
KindEditor 图片粘贴上传，实现图文粘贴，图片自动上传
Mr_Zang666的博客
08-07 310
hello
KindEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
04-24 255
hello
KindEditor上传图片
Strive279的博客
11-10 4070
KindEditor相关介绍以及下载可查看http://blog.csdn.net/mytt_10566/article/details/78062205。本篇主要关于上传图片，结合Spring MVC处理文件上传。 1.初始化编辑器 配置可参照KindEditor文档：http://kindeditor.net/docs/upload.html文档中uploadJson属性配置的是…/kindeditor/jsp/upload_json.jsp，我们可以参照该jsp修改成对应ImageControlle
KindEditor - 支持word上传的富文本编辑器
weixin_45525177的博客
09-18 435
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
kindeditor直接粘贴图片实现
weixin_45525177的博客
06-17 632
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例： 打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。 加入下面的代码： //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
Kindeditor实现图片上传
LiPengBo666的博客
12-21 1039
1.导入依赖-->添加'编辑器' 添加宣传任务 $(function() { $("body").css({ visibility: "visible" }); $("#back").click(function() { location.href = "pr
kindeditor编辑器上传多张图片
06-28
### 回答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上传代码的编写以及后端服务器代码的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值