ckeditor粘贴word图片且图片文件自动上传插件

2023-11-15

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ckeditor粘贴word图片且图片文件自动上传插件 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 将 CKEditor 5 与 nuxtjs 结合使用

    我正在尝试在我的 Nuxtjs 项目中导入 CKEditor 5 的自定义版本 并且我已经尝试了所有可能的方法来正确导入它 但没有一个对我有用 这是其中之一 let ClassicEditor let CKEditor if process
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 分页在服务器端好还是前端好? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在构建 Laravel Vue 应用程序 我想知道在后端使用分页还是在前端使用分页更好 我认为最好在每页发送尽可能少的数据的请求 但我想听听
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐

  • 解除BitLocker加密

    问题描述 硬盘设置BitLocker加密后 系统异常时必须输入BitLocker恢复密钥 才能使用windows高级功能进行修复 启用BitLocker硬盘加密后一定要保存好BitLocker密钥 加密状态下windows密码无法强制破解
  • Xilinx ISE 14.7 设置编辑器字体大小

    左上角 edit preference
  • 2013年5月23日(7-9ddraw裁剪器)

    进行裁剪步骤有4个 1 创建ddraw裁减器对象 CreateClipper 0 LPDIRECTDRAWCLIPPER NULL 2 创建裁剪队列 即RECT结构的矩形列表 blitter硬件只绘制裁剪区内的内容 其余的都剪掉 裁剪队列需
  • MATLAB对原始光斑进行运算

    clc clear all close all I imread ban jpg figure 1 subplot 1 3 1 imshow I 显示原始光斑 title 原始光斑 I1 imadjust I 0 2 0 6 subplot
  • liunx,centos7 下安装部署 Jenkins 持续集成工具,war包方式安装Jenkins

    Jenkins是一个开源软件项目 是基于Java开发的一种持续集成工具 用于监控持续重复的工作 旨在提供一个开放易用的软件平台 使软件的持续集成变成可能 下载地址 https bitnami com stack jenkins instal
  • QT:通过按钮调用qpaintEvent事件实现自定义绘图

    摘要 最近碰到了一个需要在qt中完成二维图像变换的作业 想到刚接触qt时学过qpainter来进行绘画操作 立马就着手码起来 作为一个小白 马上就发现了相应的问题 由于qt内部机制 绘画事件 paintEvent 仅允许在绘画事件下进行 比
  • 数据挖掘实战(以kaggle为例)

    第一课 第1课 机器学习算法 工具与流程概述 主要分为以下内容进行讲述 机器学习工业应用领域 机器学习常用算法 机器学习常用工具 解决问题流程 数据的处理比模型更为重要 老师的博客 内容很详细 数据预处理 有时候可以一个feature一个f
  • PCL中点云分割算法简析

    文章目录 前言 一 点云分割算法简介 1 1 基于RANSAC的点云分割 1 2 基于聚类的点云分割 1 2 1 欧式聚类分割 1 3 基于深度学习的点云分割 二 算法示例 2 1 基于RANSAC的平面分割 2 2 欧式聚类 2 3 基于
  • Linux 开源的高性能稳定服务器操作系统入门

    我们研发项目 写代码时 使用的一般都是windows或者是MAC的操作系统 作为本地的用户使用系统 而Linux一般都是放在服务器上运行的一种高效稳定的服务器系统 我们还是无法完全避免对于Linux的接触和使用 尤其是在一些中小型企业 一个
  • 设计模式:(三)原型、建造者、适配器、桥接模式

    一 原型模式 Prototype 1 概述 1 定义 用原型实例指定了要创建对象的种类 并且通过拷贝这些原型 创建新的对象 原型模式是一种创建型设计模式 允许一个对象再创建另外一个可定制的对象 无需知道如何创建的细节 2 工作原理 通过将一
  • c++ 14.0下载地址

    http go microsoft com fwlink LinkId 691126 fixForIE exe 转载于 https www cnblogs com louzi p 10552573 html
  • Loadrunner 第一个场景设计Controller

    参考书籍 软件测试 黑马程序员编著 场景设置 2 场景编辑 选中一行 点击编辑操作 3 场景执行 运行后报错Loadrunner无法创建vuser 参考文章解决 参考文章 loadrunner controller无法创建vuser 信而为
  • STM32关于USB控制端点4的问题

    解释如下 define BTABLE ADDRESS 0x00 说明端点描述符表从0x00开始 每个端点描述符会占用4个uint32 t型 即16个字节 如果使用到端点4 需要将 define ENDP0 RXADDR 0x18 defin
  • 数据库系统原理练习题(十二)

    1 要建立一个约束 保证用户表 user 中年龄 age 必须在16岁以上 下面语句正确的是 A alter table user add constraint df age DEFAULT 16 B alter table user ad
  • 外卖点餐系统

    傻瓜式外卖点餐系统 无数据库 tips 菜品类 菜品id 菜品名 菜品类型 上架时间 单价 月销售 总数量 管理员类 管理员id 账号 密码 客户类 客户id 客户名 性别 密码 送餐地址 手机号 创建时间 订单类 订单号 订单创建时间 菜
  • DNS域名服务器详解

    一 DNS DNS Domain Name System 是域名系统的英文缩写 是一种组织成域层次结构的计算机和网络服务命名系统 用于 TCP IP 网络 二 域名系统DNS的作用 通常我们有两种方式识别主机 通过主机名或者 IP 地址 人
  • Java 内存区域和GC机制

    Java垃圾回收概况 Java GC Garbage Collection 垃圾收集 垃圾回收 机制 是Java与C C的主要区别之一 作为Java开发者 一般不需要专门编写内存回收和垃圾清理代码 对内存泄露和溢出的问题 也不需要像C程序员
  • JS中的delete

    delete 操作符用于删除对象的某个属性 如果没有指向这个属性的引用 那它最终会被释放 语法 delete expression expression 的计算结果应该是某个属性的引用 例如 delete object property d
  • 网络协议、socket、webSocket

    分享一下我老师大神的人工智能教程 零基础 通俗易懂 http blog csdn net jiangjunshow 也欢迎大家转载本篇文章 分享知识 造福人民 实现我们中华民族伟大复兴 一 网络协议 网络协议为 计算机网络中进行数据交换而建
  • ckeditor粘贴word图片且图片文件自动上传插件

    如何做到 ueditor批量上传word图片 1 前端引用代码