如何做到 ueditor批量上传word图片？

1、前端引用代码

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

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

<head>

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

<title>编辑器完整版实例-1.2.6.0</title>

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

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

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

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

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

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

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

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

</head>

<body>

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

<scripttype="text/javascript">

var pasterMgr = new WordPasterManager();

pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"

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

UE.getEditor('myEditor',{onready:function(){//创建一个编辑器实例

pasterMgr.SetEditor(this);

}});

</script>

</body>

</html>

请求

文件上传的默认请求是一个文件，作为具有“upload”字段的表单数据。

响应：文件已成功上传

当文件成功上传时的JSON响应：

uploaded- 设置为1。

fileName - 上传文件的名称。

url - 上传文件的URL。

响应：文件无法上传

uploaded- 设置为0。

error.message - 要显示给用户的错误消息。

2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

目前项目是用了一种变通的方式：

先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

（富文本显示有个坑：没找到直接给富文本赋值的方法 要先销毁 记录下

success : function(data) {

$('#content').attr('value',data.imagePath);

var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值

if (editor) {

editor.destroy(true);//销毁编辑器

}

CKEDITOR.replace('content'); //替换编辑器，editorID为ckeditor的"id"属性的值

$("#content").val(result);    //对editor赋值

//CKEDITOR.instances.contentCkeditor.setData($("#content").text());

}

3.接收上传的图片并保存在服务端

<?php

ob_start();

//201201/10

$timeDir =date("Ym")."/".date("d");

$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;

$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";

//相对路径 http://www.ncmem.com/upload/2012-1-10/

$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";

//自动创建目录。upload/2012-1-10

if(!is_dir($uploadDir))

{

mkdir($uploadDir,0777,true);

}

//如果PHP页面为UTF-8编码，请使用urldecode解码文件名称

//$fileName = urldecode($_FILES['postedFile']['name']);

//如果PHP页面为GB2312编码，则可直接读取文件名称

$fileName = $_FILES['file']['name'];

$tmpName = $_FILES['file']['tmp_name'];

//取文件扩展名jpg,gif,bmp,png

$path_parts =pathinfo($fileName);

$ext = $path_parts["extension"];

$ext =strtolower($ext);//jpg,png,gif,bmp

//只允许上传图片类型的文件

if($ext == "jpg"

|| $ext == "jpeg"

|| $ext == "png"

|| $ext == "gif"

|| $ext == "bmp")

{

//年_月_日_时分秒毫秒.jpg

$saveFileName = $fileName;

//xxx/2011_05_05_091250000.jpg

$savePath = $uploadDir . "/" . $saveFileName;

//另存为新文件名称

if (!move_uploaded_file($tmpName,$savePath))

{

exit('upload error!' . "文件名称：" .$fileName . "保存路径：" . $savePath);

}

}

//输出图片路径

//$_SERVER['HTTP_HOST']   localhost:81

//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);

echo $relatPath .  $saveFileName;

header('Content-type: text/html; charset=utf-8');

header('Content-Length: ' .ob_get_length());

?>

效果展示：

在使用前需要配置一下，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/

UEditor可以如何直接复制word的图文内容到编辑器中的更多相关文章

  1. UEditor可以如何直接复制word的图文内容到编辑器中？

    下载并打开工程: 文档的上传 运行: 复制随便一篇文档,粘贴进去. 通过粘贴后,文档以及图片被粘贴进来了,看看html代码:   图片全部使用img标签统一.传输进度条的效果也不错. 文档图片被放置在 ...

  2. 如何从Word带图粘贴到编辑器中

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  3. 百度ueditor新增的将word内容导入到富文本编辑框的功能.

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. 如何从word中复制内容到网站后台编辑器中

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  5. 如何从word中直接复制图片到编辑器中

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  6. 如何把word文档内容和图片直接导入到wordpress编辑器

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  7. Js使用word书签填充内容

    Js使用word书签填充内容 1.在模板文件中需要填充的地方插入书签 填充内容为:(|光标所在处) 填写书签名,点击添加完成: 2.使用js打开模板,获取书签位置,填充数据: function pri ...

  8. VBA读取word中的内容到Excel中

    原文:VBA读取word中的内容到Excel中 Public Sub Duqu()      Dim myFile As String     Dim docApp As Word.Applicati ...

  9. Umbraco 7 支持Microsoft Word 2013 发布内容

    本文介绍如何使用Microsoft Word 2013 编写或编辑你的Blogs或新闻页面,甚至不需要打开浏览器, 我将分成两部分来讲. 概述 本例实采用的是Umbraco 7.2 版本,首页效果: ...

随机推荐

  1. shell脚本一一项目5

    主题:一键查看占用内存.cpu高的进程 echo "----------------cpu top 10 list----------------"ps -eo pid,pcpu, ...

  2. servlet过滤器Filter使用之DelegatingFilterProxy类

    正常情况下,我们需要添加一个过滤器,需要实现javax.servlet.Filter接口,再在web.xml中配置filter,如下: package cc.eabour.webapp.securit ...

  3. GIt 添加到远程

    转载:https://www.liaoxuefeng.com/wiki/896043488029600/898732864121440 添加到远程 1.注册/登录 GitHub(https://git ...

  4. 安全运维 - Linux系统维护

    命令相关 帮助信息命令:help.whatis.info.which.whereis.man 目录管理: cd.ls.mkdir.rm.chmod.mv 用户管理: groupadd.groupdel ...

  5. 一些基础的ES6 语法

    <script> window.onload = function () { //---------------------------let----------------------- ...

  6. IQueryable在LINQ中

    IQueryable接口定义如下: // 摘要: // 提供对未指定数据类型的特定数据源的查询进行计算的功能. public interface IQueryable : IEnumerable { ...

  7. Varint数值压缩存储方法

    coming from http://www.cnblogs.com/smark/archive/2012/05/03/2480034.html 在编写网络通讯的时候我们经常需要把一些数据存储到byt ...

  8. python工程的结构

    1 python系统库的位置 大部分系统库在/usr/lib64/python2.7目录下,但是像sys模块,是python内置的库,是用c实现的,直接连接进了python.exe中了. 也就是说,在 ...

  9. 从SVN下检出项目内容【步骤】

    1.新创建一个新的工作环境,然后new--->other--->SVN 2.点击Next,然后进行检出项目的操作,如下图所示: 3.再点击Next,进行输入指定的url地址,从指定的url ...

  10. JVM调优 dump文件怎么生成和分析

    1.获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: - ...