• CMS粘贴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

  • 相关阅读:
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Python eval() 函数
    Python repr() 函数
  • 原文地址:https://www.cnblogs.com/songsu/p/14303957.html
Copyright © 2020-2023  润新知