如何做到 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. 解决Chrome网页编码显示乱码的问题

    解决Chrome网页编码显示乱码的问题 记得在没多久以前,Google Chrome上面出现编码显示问题时,可以手动来调整网页编码问题,可是好像在Chrome 55.0版以后就不再提供手动调整编码,所 ...

  2. 类Random

    /* * Random:产生随机数的类 * * 构造方法 * public Random();没有给种子,用的是默认种子,是当前时间的毫秒值 * public Random(long seed);使用 ...

  3. 2 Vue.js基础

    1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

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

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

  5. Java 位运算符和移位运算符

    一,运算的位运算符: &  ~ |  ^     主要是对二进制的位计算 :   &  : 两个操作数中位都为1 结果才为1   其他结果为0      forExample: 128 ...

  6. jsp+servlet的简单实现

    开发环境 tomcat7.0,MyEclipse 10 1.建一个简单的Web Project ,项目名jspServlet: 2.在src目录下建一个package ,为com.fandy.serv ...

  7. 2019寒假作业三：PTA7-1抓老鼠啊~亏了还是赚了

    - 抓老鼠啊~亏了还是赚了? ( 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C ...

  8. Java 动态代理及AOP实现机制

    AOP实现机制http://www.iteye.com/topic/1116696 AOP: (Aspect Oriented Programming) 面向切面编程AOP包括切面(aspect).通 ...

  9. mysql中【update/Delete】update中无法用基于被更新表的子查询，You can't specify target table 'test1' for update in FROM clause.

    关键词:mysql update,mysql delete update中无法用基于被更新表的子查询,You can't specify target table 'test1' for update ...

  10. win10系统Mysql5.7服务启动报："1053错误:服务没有及时响应启动或控制请求"

    win10安装Mysql5.7: MySQL压缩包解压后,在目录下增加my.ini配置文件 [mysqld] port = basedir=D:\Mysql datadir=D:\Mysql\data ...