如何做到 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. Codeforces 666E Forensic Examination(广义后缀自动机+线段树合并)

    将所有串(包括S)放一块建SAM.对于询问,倍增定位出该子串所在节点,然后要查询的就是该子串在区间内的哪个字符串出现最多.可以线段树合并求出该节点在每个字符串中的出现次数. #include<b ...

  2. mysql查看表结构命令,如下:

    desc 表名; show columns from 表名; describe 表名; show create table 表名;

  3. SQLSERVER中计算某个字段中用分隔符分割的字符的个数

    比如字段sid中用'|'分割的一些字符   a|b|c|d,需要通过sql查询出字符的个数是4. 可以使用如下脚本: SELECT LEN(sid)-LEN(REPLACE(sid,'|',''))+ ...

  4. (六)CXF之自定义拦截器

    一.需求分析 客户端在调用服务端的方法时,需要进行用户名和密码验证.此时分为: 客户端请求的时候,要发送用户名密码到服务端 服务端检验用户名密码. 二.案例 前提:本章案例是基于前一章节的例子进一步讲 ...

  5. (七)shiro之编码/加密

    一.编码/解码 使用Base64编码/解码操作 public class TestMain { public static void main(String[] args) { SecurityMan ...

  6. WPF 自定义一个控件,当点击按钮是触发到ViewModel(业务逻辑部分)和Xaml路由事件(页面逻辑部分)

    #region - 用于绑定ViewModel部分 - public ICommand Command { get { return (ICommand)GetValue(CommandPropert ...

  7. 最近公共祖先 LCA (Lowest Common Ancestors)-树上倍增

    树上倍增是求解关于LCA问题的两个在线算法中的一个,在线算法即不需要开始全部读入查询,你给他什么查询,他都能返回它们的LCA. 树上倍增用到一个关键的数组F[i][j],这个表示第i个结点的向上2^j ...

  8. VBA消息框(MsgBox)(五)

    MsgBox函数显示一个消息框,并等待用户点击一个按钮,然后根据用户点击的按钮执行相关的操作. 语法 MsgBox(prompt[,buttons][,title][,helpfile,context ...

  9. JS 学习书籍电子版PDF下载

    JavaScript权威指南(第6版)(中文版) 链接:https://pan.baidu.com/s/1H1v77UY-yh7oDxonRjd0GA 提取码:r3pu JavaScript DOM编 ...

  10. Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of

    我试了修改或者配置gradle文件没有成功解决的 ,所以试了这个解决方案 试了下这个是可以解决的. 变量名   _JAVA_OPTIONS 变量值   -Djava.net.preferIPv4Sta ...