精华内容
下载资源
问答
  • 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@ pagecontentType="text/html;charset=utf-8"%><%@ pageim....

    这种方法是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

    展开全文
  • tinymce实现粘贴图片自动上传 默认粘贴图片后(如屏幕截图,然后ctlr+v),会转换成base64编码,导致文章内容很大。通过添加如下回调,粘贴后自动上传. 注意:本配置在tinymce5.2.0图片已经上传服务器,但是不会及时...

    tinymce实现粘贴图片自动上传

    默认粘贴图片后(如屏幕截图,然后ctlr+v),会转换成base64编码(即使配置了文件上传的处理函数也不会上传),导致文章内容很大。通过添加如下回调,粘贴后自动上传.

    注意:本配置在tinymce5.2.0图片已经上传服务器,但是不会及时回显,需要在编辑器中再输入一个字符,src的url才会变动。在tinymce5.6.0下会实时变动。

    tinymce.init({
      selector: 'div#editable',
      // 解决粘贴图片后,不自动上传,而是使用base64编码。
      urlconverter_callback: (url, node, onSave, name) => {
      if (node === 'img' && url.startsWith('blob:')) {
          // Do some custom URL conversion
          console.log('urlConverter:', url, node, onSave, name)
          tinymce.activeEditor && tinymce.activeEditor.uploadImages()
        }
        // Return new URL
        return url
      },
      // 此处为图片上传处理函数
      images_upload_handler: (blobInfo, success, failure, progress) => {
          console.log('上传处理器:', blobInfo)
    
          // 方法1:用base64的图片形式上传图片
          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)
    
          // 方法2:上传oos
          const xhr = new XMLHttpRequest()
          xhr.withCredentials = false
          xhr.open('POST', '/zuul/purchase/manage/object/push')
          // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8')
          xhr.setRequestHeader('x-token', this.$store.getters.token)
          xhr.upload.onprogress = function (e) {
            progress(e.loaded / e.total * 100)
          }
    
          xhr.onload = function () {
            if (xhr.status === 403) {
              failure('HTTP Error: ' + xhr.status, { remove: true })
              return
            }
            if (xhr.status < 200 || xhr.status >= 300) {
              failure('HTTP Error: ' + xhr.status)
              return
            }
            const json = JSON.parse(xhr.responseText)
            if (!json || typeof json.data.fileName !== 'string') {
              failure('Invalid JSON: ' + xhr.responseText)
              return
            }
    
            const file = json.data
            const url = '/purchase/manage/attachment/public/operation/pull?path=' + file.fileName + '&fileName=' +
              encodeURIComponent(file.originalFileName)
            success(url)
          }
    
          xhr.onerror = function () {
            failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status)
          }
    
          const formData = new FormData()
          formData.append('multipartFile', blobInfo.blob(), blobInfo.filename())
    
          xhr.send(formData)
        },
    });
    

    不配置urlconverter_callback,效果:
    在这里插入图片描述

    配置后效果图:
    在这里插入图片描述

    展开全文
  • 文章目录tinymce 实现 粘贴图片自动上传不能复制本地图片然后粘贴粘贴进来的图片上传问题上传图片后回显图片点开大图后复制进来 2 张的问题 不能复制本地图片然后粘贴 图片的复制粘贴,依赖于 paste 插件 文档:插件 ...

    tinymce 实现 粘贴图片自动上传

    tinymce 中文文档:上传图片和文件

    关于图片上传的踩坑记录,基本就是如下几个

    不能复制本地图片然后粘贴

    图片的复制粘贴,依赖于 paste 插件 文档:插件 \ paste 粘贴插件

    简单的配置如下:

    tinymce.init({
      selector: '#tinydemo',
      plugins: 'paste',
      toolbar: 'paste',
      paste_data_images: true // 默认是false的,记得要改为true才能粘贴
    })
    

    粘贴后的图片在显示上是这样的:

    是一个二进制流链接的文件,这种保存到到后端在回显也显示不了了,所以要配置上传。还是看官方文档 上传图片和文件 | TinyMCE 中文文档中文手册 (ax-z.cn) 由于我都是用的自己的上传,这一块就没去深究


    粘贴进来的图片上传问题

    如何获取粘贴的图片内容: 上传图片和文件 | TinyMCE 中文文档中文手册 (ax-z.cn)

    找到 images_upload_handler 函数一栏,在 init 方法中使用这个函数

    tinymce.init({
      images_upload_handler: function(blobInfo, success, failure, progress) {}
    })
    

    blodInfo 对象包含了几个方法:

    方法名执行后返回值
    base64图片对应的 base64 编码
    blob二进制流 File 对象
    blobUri二进制流的显示 URL(临时 URL,页面关闭后就消失了)
    filename文件名称(这里是被转换过的文件名称,并非原名)如: “mceclip0.jpg”
    id文件 ID 如: “mceclip0”
    name文件名称,不带后缀的 如:“mceclip0”
    uri最后一个我也不知道是啥

    如果要获取文件原名,要在 blod 对象中拿

    上传图片,自然是拿 blod 对象,然后结合自己的业务逻辑去上传给后端就行

    上传图片后回显

    success, failure, progress 几个回调的作用

    名称作用
    successsuccess('http://www.xxxx.com/xxx.png') 要插入的图片
    failurefailure() 印象中这个方法也很鸡肋,甚至最后我都用 success 了
    progressprogress(50) 显示图片上传的进度(全局显示,没啥作用)

    图片点开大图后复制进来 2 张的问题

    你以为坑到这里就结束了吗?no no no,这是各大平台都会出现的问题。

    问题是这样的:window 平台下,图片在缩略图/没点开大图的时候,复制粘贴,没问题。
    如果双击,打开了图片的大图在进行复制,粘贴到编辑器后,会显示 2 张一样的图片。包括微信点开大图,等等都会

    我粘贴进去的图片名称是 :img.jpg。很明显在打印信息的 blodInfo.blod().name 中,多了一张 image.png 的图片。所以这并不属于编辑器的 bug,而是 window 平台下的机制

    无论粘贴什么图片,只要点开大图都会多一张叫 image.png 的图片。可是不排除用户的确会上传 image.png 的图片,所以不能简单粗暴的过滤 image.png 的图片。

    利用防抖函数的思想,过滤掉多余的 image.png

    由于 bug 修复的比较紧急,代码并没有做过多的优化/封装成方法,稍微的看看逻辑就好

    通常来说,image.png 都会比原图要先复制进来

    1. 遇到名为 image.png 的图片,延迟 30 毫秒在上传(这里用到了定时器 setTimeout)
    2. 如果是触发了上面说的 bug,30 毫秒内原图应该就会被复制进来了,那就是说如果第二次触发 images_upload_handler 函数时,
      2.1. 如果还有定时器在等待,那就说明定时器里面的图是多余的
      2.2. 如果超过 30 毫秒后还没有另外的图片触发images_upload_handler 函数,说明用户上传的就是叫 image.png 的图片,让定时器执行上传完成即可。
    3. 30 毫秒内触发了删除,定时器肯定要清除,可是图片还在编辑器内没删除,这时候就要执行 removeFn。在下面备注也有写了,记得要用闭包,把image.png图片对应的success函数存起来。因为如果图片上传成功了,还得靠这个函数设置成对应的图片
    // 定义2个全局变量
    let uploadTimeOut = null
    let removeFn = null
    
    tinymce.init({
      // 上传函数
      images_upload_handler: (blobInfo, success, failure, progress) => {
        if (uploadTimeOut) {
          removeFn && removeFn()
          clearTimeout(uploadTimeOut)
        }
        let fileInfo = blobInfo.blob()
    
        // 定义一个上传方法
        var upload = () => {
          // this.myUpload 是 上传文件的逻辑了,用promise包了一下
          this.myUpload(fileInfo)
            .then(res => {
              // 上传成功后
              success(res.data.url)
            })
            .catch(res => {
              // 上传失败后,把src标记为 uploadFail ,然后在删除
              // failure 函数有什么坑了,所以不想用它了
              success('uploadFail')
    
              // setTimeOut 是为了然success函数执行到位后在删除,否则可能查不到对应的图片
              setTimeout(() => {
                let errorImg = document.querySelectorAll('img[src="uploadFail"]')
                errorImg.forEach(item => {
                  item.parentNode.removeChild(item)
                })
              }, 100)
            })
        }
    
        if (fileInfo.name == 'image.png') {
          uploadTimeOut = setTimeout(() => upload(), 30)
    
          // 这里要用一下闭包把当前的success函数保存起来,具体为啥一下子说不清,存起来就是了
          // 图片复制进来后唯一的标识就是 blobUri 了,到时候删除还得靠他
          // removeFn 与第9行代码呼应
          removeFn = (function(url, cb) {
            return function() {
              cb && cb(url)
              let imgNode = document.querySelector('img[src="' + url + '"]')
              imgNode && imgNode.parentNode && imgNode.parentNode.removeChild(imgNode)
              removeFn = null
            }
          })(blobInfo.blobUri(), success)
        } else {
          upload()
        }
      }
    })
    

    大功告成~

    展开全文
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...

    很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。

    下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面

    工具/原料

    百度doc
    任意富文本编辑器,以UEDdito为例

    方法/步骤

    登录,http://word.baidu.com

    点击右上角 导入文档,如图所示

    导入后,系统会自动将word的内容加载进去。此时 点击右上角编辑,Ctrl+A复制所有内容

    打开UEditor,Ctrl+V 粘贴,搞定~

    注意事项

    建议使用Chrome浏览器操作

    此外,再分享一个更强大的控件:http://blog.ncmem.com/wordpress/2019/08/07/%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%b2%98%e8%b4%b4word%e5%86%85%e5%ae%b9/

    展开全文
  • 好久没有编程了,最近需要完成一个小功能,为了方便,需要粘贴图片上传到后台。前台编辑器用tinymce(N年前用过,我也就知道这个编辑器而已。这次使用下来感觉文档更丰富了),后台我用的Flask。昨天从下午4点开始...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为...
  • tinymce直接粘贴图片实现

    千次阅读 2020-06-18 09:30:33
    tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录...
  • 前面一篇写了上传到Flask后台,但是我不熟悉Flask,原先想学习一下,据说是轻量级。 但是我发现,学习会浪费我大量的时间,因为我并不是以这个为生的,我的目标只是要完成功能,让我自己能尽早使用起来,而且用户...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码) ...
  • H5 编辑器 Tinymce之解决图片上传/粘贴
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录...
  • TinyMCE自定义上传图片

    2018-12-04 12:37:16
    tinyMCE编辑器,包含自定义上传图片插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示
  • tinymce编辑器复制粘贴图片上传

    千次阅读 2020-06-15 11:13:07
    tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录...
  • 首先使用Tinymce富文本组件这里不说–>自行百度 我实现的方式 使用js去操作获取class然后给他添加单击事件,同时也把所有src地址全部放在一个数组里面,最后点击的时候去遍历一下数组获取下标,就能是实现了 下面...
  • Vue项目中使用Tinymce,解决图片上传/粘贴 https://www.jianshu.com/p/1e910124eacf
  • 实现思路: 使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE图片上传扩展, 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ...
  • vue实战026:TinyMCE重写图片上传功能

    千次阅读 2019-07-01 08:01:41
    TinyMCE插入图片默认的是直接插入图片地址的,而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址,前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传,原理是一样的。...
  • 原文地址:http://www.cnblogs.com/xishuai/p/jquery-paste-upload-image.html ... 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传。 textarea使用(返回markdown格式的图片):...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 588
精华内容 235
关键字:

tinymce图片粘贴上传