如何做到 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/ueditor%e8%87%aa%e5%8a%a8%e4%b8%8a%e4%bc%a0word%e4%b8%ad%e7%9a%84%e5%9b%be%e7%89%87/

ueditor自动上传Word中的图片的更多相关文章

  1. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  2. 怎样将word中的图片插入到CSDN博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  3. ueditor粘贴word中图片

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  4. 如何把word中的图片怎么导出来呢？

    在办公使用word的过程中你可能经常会遇到这个问题:插入到word中的图片找不到导出来的方法,是不是很郁闷呢,别急,今天咱们研究一下把word中的图片导出来的方法(把"我的"变成你 ...

  5. 写带有清晰图片的博客：如何将word中的图片复制到windows live writer保持大小不变--清晰度不变

    写blog的习惯,先在word写了,复制到windows live writer,再发布到博客园.word中的文章,图片有缩放比例,复制到windows live writer后图片变得不清晰.除了一 ...

  6. .net 下word 中的图片与文字分离

    最近在做一个项目要求word 中的图片与文字分离 ,找了好久终于找到一个完美的方法 c#实现word中的图文分离   part 1: class define Code highlighting pr ...

  7. word中更改图片和标题之间的垂直距离

    word中插入图片后.往往须要给图片加上标题. 你插入图片和给图片插入标题时,word用的是默认的格式给你插入的图片和标题. 假如原来的paragraph是2倍行距.你的图片和标题之间的距离也是2倍行 ...

  8. 利用POI抽取word中的图片并保存在文件中

    利用POI抽取word中的图片并保存在文件中 poi.apache.org/hwpf/quick-guide.html 1.抽取word doc中的图片 package parse; import j ...

  9. Java 添加、删除、格式化Word中的图片

    本文介绍使用Spire.Cloud.SDK for Java提供的ImagesApi接口来操作Word中的图片.具体可通过addImage()方法添加图片.deleteImage()方法删除图片.up ...

随机推荐

  1. 前端 aes 加密

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. git 去除版本控制

    git会进入当前文件目录, 然后执行如下命令: find . -name ".git" | xargs rm -Rf 该项目就会去除git的版本控制了.再修改的话也不会影响git的 ...

  3. JS OOP -01 面向对象的基础

    JS面向对象的基础: 1.用定义函数的方式定义类 2.用new操作符获得一个类的实例 3.使用 [ ] 引用对象的属性和方法 4.动态添加,修改,删除对象的属性和方法 5.使用 { } 语法创建无类型 ...

  4. JS OOP 概述

    JS面向对象,大致内容 1.面向对象的基础 2.深入认识JS的函数 3.JS类的实现 4JS中共有成员,私有成员和静态成员 5.JS的反射 6.JS的继承 7.JS实现抽象类 8.JS事件设计模式 9 ...

  5. Linq to sql之left join运用示例

    示例一: var l= from a in cardsBll.GetCards() join b in usersBll.GetAllUsers() on a.CardSn equals b.Card ...

  6. freemarker循环、下标及判断

    一.freemarker中list循环使用非常频繁,下面介绍lfreemarker中list简单的用法 1.在freemarker中遍历list数组使用list指令:<#list sequenc ...

  7. 表格中的DOM

    通过DOM来操作table跟在html中操作table是不一样的,下面来看看怎样通过DOM来操作table. 按照table的分布来创建: <table> <thead> &l ...

  8. Linux Centos7配置ftp服务器

    一.安装 1.安装 yum install  -y vsftpd 2.设置开机启动 systemctl enable vsftpd.service 3.启动 systemctl start vsftp ...

  9. js对象转数组

    1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: ‘nihao‘, 1: ‘haha‘, 2: ‘ga ...

  10. Java 之 Collections 工具类

    一.Collections 概述 java.utils.Collections 是集合工具类,用来对集合进行操作. 二.常用方法 public static <T> boolean add ...