如何复制word的图文到ueditor中自动上传

最新推荐文章于 2021-04-21 09:49:13 发布
最新推荐文章于 2021-04-21 09:49:13 发布
阅读量98 收藏
点赞数
分类专栏： word文档图片粘贴- 文章标签： javascript vue.js html5
原文链接：https://www.cnblogs.com/songsu/p/13471224.html
版权

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

1、前端引用代码

<!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>编辑器完整版实例-1.2.6.0</title>

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

    <script type="text/javascript"src="ueditor.all.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"/>

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

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

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

    <scrip ttype="text/javascript"src="WordPaster/js/skygqbox.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://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/

讨论群：223813913

M_Snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ueditor粘贴word里图文内容到编辑器中
05-24
在本主题中，我们将聚焦于如何将Word文档中的图文内容有效地粘贴到Ueditor编辑器中。 首先，了解Ueditor的基本操作是必要的。Ueditor是一款由百度公司开发的JavaScript富文本在线编辑器，支持多种浏览器环境，提供...
ueditor完美支持word导入自动转存，无需flash
04-18
总的来说，ueditor是一个强大的富文本编辑器，其word导入功能解决了网络内容创作中的一个痛点，使得从Word到网页的转换变得更加便捷。通过理解并利用提供的这些文件，开发者可以快速集成ueditor到自己的项目中，为...
UEditor实现WORD粘贴图片自动上传
weixin_45525177的博客
07-24 191
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面 方法一： 工具/原料 百度doc 任意富文本编辑器，以UEDdito为例 方法/步骤 登录，http://word.baidu.com 点击右上角 导入文档，如图所示 导入后，系统会自动将word的内容加载进去。此时 点击右上角编辑，Ctrl+A复制所有内容
如何复制word的图文到百度ueditor中自动上传
weixin_45525177的博客
08-12 200
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
ueditor+实现word图片自动上传
yjjatqihc的博客
04-21 167
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
百度UEditor编辑器可以如何直接复制word的图文内容到编辑器中?
weixin_45525177的博客
08-21 878
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面 方法一： 工具/原料 百度doc 任意富文本编辑器，以UEDdito为例 方法/步骤 登录，http://word.baidu.com 点击右上角 导入文档，如图所示 导入后，系统会自动将word的内容加载进去。此时 点击右上角编辑，Ctrl+A复制所有内容
ueditor导入本地word图片并编辑
11-04
在ueditor的基础上增加了导入word的功能，支持导入有图片的word文档，并把maven中的依赖包全部导入到了lib包中作为本地资源。（需要自行配置database.properties数据库信息）
ueditor编辑器增加导入word
05-13
该插件主要由两部分组成：编辑器上传word插件和文档转换功能代码，最重要的是文档转换代码文件，需要稍作修改。 Laravel、thinkPHP框架需要先安装PHPword，需要用PHPword扩展将word转化成html。该插件主要由两部分...
vue项目中应用ueditor自定义上传按钮功能
08-27
Vue项目中应用ueditor自定义上传按钮功能 本文主要介绍了Vue项目中应用ueditor自定义上传按钮功能，通过以Vue-cli生成的项目为例，讲解了Vue项目中使用ueditor的方法。 一、ueditor的基本使用 ueditor是一款功能...
UEditor上传图片word
weixin_45525177的博客
09-03 180
如何做到 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="Co...
百度UEditor实现WORD粘贴图片自动上传
weixin_45525177的博客
07-28 430
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
ueditor 图片粘贴上传，实现图文粘贴，图片自动上传
weixin_45525177的博客
10-12 2188
如何做到 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/xh...
空间日志编辑器：word文档图文快速粘贴到web
weixin_45525177的博客
10-14 434
百度ueditor可以实现word文档图文快速粘贴到web 1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了...
asp.net+ueditor word粘贴上传
weixin_30667649的博客
06-12 294
最近公司做项目需要实现一个功能，在网页富文本编辑器中实现粘贴Word图文的功能。我们在网站中使用的Web编辑器比较多，都是根据用户需求来选择的。目前还没有固定哪一个编辑器有时候用的是UEditor,有时候用的CKEditor,KindEditor,TinyMCE。在网上查了很多资料，UEditor和其它的Web编辑器（富文本编辑器）在Chrome中可以支持单张图片粘贴。但是我们的用户需要处理的是W...
JAVA中将WORD转换为HTML导入到UEDITOR编辑器中
最新发布
06-03
在Java中将Word转换为HTML需要使用Apache POI和JodConverter库。而将HTML导入到UEditor编辑器中，需要在前端使用UEditor富文本编辑器，并在后端使用Java Web框架（如Spring MVC）来处理上传文件和保存HTML内容。 以下是一个简单的Java代码示例，演示如何将Word文档转换为HTML，并将HTML保存到服务器上的文件中： ```java import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import org.apache.poi.hwpf.HWPFDocument; import org.jodconverter.JodConverter; import org.jodconverter.office.LocalOfficeManager; import org.jodconverter.office.OfficeException; import org.jodconverter.office.OfficeManager; public class WordToHtmlConverter { public static void main(String[] args) { // Start the office manager OfficeManager officeManager = LocalOfficeManager.builder().officeHome("/usr/lib/libreoffice").install().build(); try { officeManager.start(); // Load the Word document HWPFDocument document = new HWPFDocument(new FileInputStream("document.doc")); // Create a temporary file for the HTML output File tempFile = File.createTempFile("document", ".html"); // Convert the document to HTML JodConverter.convert(document).to(tempFile).execute(); // Save the HTML content to a file on the server FileOutputStream fos = new FileOutputStream("output.html"); fos.write(Files.readAllBytes(tempFile.toPath())); fos.close(); // Delete the temporary file tempFile.delete(); } catch (IOException | OfficeException e) { e.printStackTrace(); } finally { // Stop the office manager officeManager.stop(); } } } ``` 在上述代码中，我们使用JodConverter将Word文档转换为HTML，并将HTML内容保存到服务器上的文件中。然后，我们可以在Java Web应用程序中使用Spring MVC等框架来处理上传文件，并将HTML内容保存到数据库中。最后，在前端使用UEditor富文本编辑器时，我们可以将HTML内容加载到编辑器中，让用户进行编辑和保存。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值