• CKEditor粘贴图片自动上传到服务器(VUE版)


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

  • 相关阅读:
    封装成帧、帧定界、帧同步、透明传输(字符计数法、字符串的首尾填充法、零比特填充的首尾标志法、违规编码法)
    计算机网络之数据链路层的基本概念和功能概述
    物理层设备(中继器、集线器)
    计算机网络之传输介质(双绞线、同轴电缆、光纤、无线电缆、微波、激光、红外线)
    计算机网络之编码与调制
    0953. Verifying an Alien Dictionary (E)
    1704. Determine if String Halves Are Alike (E)
    1551. Minimum Operations to Make Array Equal (M)
    0775. Global and Local Inversions (M)
    0622. Design Circular Queue (M)
  • 原文地址:https://www.cnblogs.com/songsu/p/14110073.html
Copyright © 2020-2023  润新知