zoukankan      html  css  js  c++  java
  • CuteEditor粘贴word图片且图片文件自动上传功能

    如何做到 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

  • 相关阅读:
    cf1100 F. Ivan and Burgers
    cf 1033 D. Divisors
    LeetCode 17. 电话号码的字母组合
    LeetCode 491. 递增的子序列
    LeetCode 459.重复的子字符串
    LeetCode 504. 七进制数
    LeetCode 3.无重复字符的最长子串
    LeetCode 16.06. 最小差
    LeetCode 77. 组合
    LeetCode 611. 有效三角形个数
  • 原文地址:https://www.cnblogs.com/songsu/p/14273089.html
Copyright © 2011-2022 走看看