让富文本编辑器支持复制doc中多张图片直接粘贴上传

让富文本编辑器支持复制doc中多张图片直接粘贴上传

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧

我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布

感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件。

https://ueditor.baidu.com/website/umeditor.html(有兴趣可以试试)

难道就这么失败了?

不,但是我意外发现UMeditor竟然支持粘贴word中的多张图片(仅支持IE11,不支持IE10以下版本、以及Chrome等)

切换HTML,会看到你的图片被组织成base64

nice,机会来了,既然IE支持复制word中的多张图片直接粘贴base64,既然有了base64我们就有办法上传转图片啦!

那么我们来改造Ueditor,让他支持IE11(总比没得用强吧)

打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

1、注释掉14679行(暂时不明确有什么不良影响)

//执行默认的处理

//me.filterInputRule(root);

2、在28725行插入以下代码(如果是使用IE11粘贴会得到base64,先用占位符占位,再逐个把base64专成Blob文件并上传,上传完成再替换为你的img属性src为服务器图片url)

this.WordParser_PasteWord = function (json)

{

this.postType = WordPasteImgType.word;

this.EditorContent = json.word;

for (var i = 0, l = json.imgs.length; i < l; ++i)

{

this.addImgLoc(json.imgs[i]);

}

this.OpenDialogFile();

};

this.WordParser_PasteExcel = function (json)

{

this.postType = WordPasteImgType.word;

this.EditorContent = json.word;

for (var i = 0, l = json.imgs.length; i < l; ++i)

{

this.addImgLoc(json.imgs[i]);

}

this.OpenDialogFile();

};

this.WordParser_PasteHtml = function (json)

{

this.postType = WordPasteImgType.word;

this.InsertHtml(json.word);//

this.working = false;

};

this.WordParser_PasteFiles = function (json)

{

this.postType = WordPasteImgType.local;

for (var i = 0, l = json.imgs.length; i < l; ++i)

{

var task = this.addImgLoc(json.imgs[i]);

task.PostLocalFile = true;//

}

this.OpenDialogFile();

};

this.WordParser_PasteImage = function (json)

{

this.OpenDialogPaste();

this.imgMsg.text("开始上传");

this.imgPercent.text("1%");

};

this.WordParser_PasteAuto = function (json)

{

this.postType = WordPasteImgType.network;

for (var i = 0, l = json.imgs.length; i < l; ++i)

{

this.addImgLoc(json.imgs[i]);

}

this.OpenDialogFile();

};

this.WordParser_PostComplete = function (json)

{

this.imgPercent.text("100%");

this.imgMsg.text("上传完成");

var img = "<img src=\"";

img += json.value;

img += "\" />";

this.InsertHtml(img);

this.CloseDialogPaste();

this.working = false;

};

this.WordParser_PostProcess = function (json)

{

this.imgPercent.text(json.percent);

};

this.WordParser_PostError = function (json)

{

this.OpenDialogPaste();

this.imgMsg.text(WordPasterError[json.value]);

this.imgIco.src = this.Config["IcoError"];

this.imgPercent.text("");

};

this.File_PostComplete = function (json)

{

var up = this.fileMap[json.id];

up.postComplete(json);

delete up;//

};

this.File_PostProcess = function (json)

{

var up = this.fileMap[json.id];

up.postProcess(json);

};

this.File_PostError = function (json)

{

var up = this.fileMap[json.id];

up.postError(json);

};

this.Queue_Complete = function (json)

{

//上传网络图片

if (_this.postType == WordPasteImgType.network)

{

_this.GetEditor().setData(json.word);

} //上传Word图片时才替换内容

elseif (_this.postType == WordPasteImgType.word)

{

_this.InsertHtml(json.word);//

}

this.CloseDialogFile();

_this.working = false;

};

this.load_complete_edge = function (json)

{

_this.app.init();

};

this.state_change = function (json) {

if (json.value == "parse_document")

{

this.OpenDialogFile();

this.filesPanel.text("正在解析文档");

}

elseif (json.value == "process_data") {

this.filesPanel.text("正在处理数据");

}

elseif (json.value == "process_data_end")

{

this.filesPanel.text("");

}

};

this.load_complete = function (json)

{

var needUpdate = true;

if (typeof (json.version) != "undefined")

{

this.setuped = true;

if (json.version == this.Config.Version) {

needUpdate = false;

}

}

if (needUpdate) this.need_update();

//else { $.skygqbox.hide(); }

};

this.recvMessage = function (msg)

{

var json = JSON.parse(msg);

if      (json.name == "Parser_PasteWord") _this.WordParser_PasteWord(json);

elseif (json.name == "Parser_PasteExcel") _this.WordParser_PasteExcel(json);

elseif (json.name == "Parser_PasteHtml") _this.WordParser_PasteHtml(json);

elseif (json.name == "Parser_PasteFiles") _this.WordParser_PasteFiles(json);

elseif (json.name == "Parser_PasteImage") _this.WordParser_PasteImage(json);

elseif (json.name == "Parser_PasteAuto") _this.WordParser_PasteAuto(json);

elseif (json.name == "Parser_PostComplete") _this.WordParser_PostComplete(json);

elseif (json.name == "Parser_PostProcess") _this.WordParser_PostProcess(json);

elseif (json.name == "Parser_PostError") _this.WordParser_PostError(json);

elseif (json.name == "File_PostProcess") _this.File_PostProcess(json);

elseif (json.name == "File_PostComplete") _this.File_PostComplete(json);

elseif (json.name == "File_PostError") _this.File_PostError(json);

elseif (json.name == "load_complete") _this.load_complete(json);

elseif (json.name == "Queue_Complete") _this.Queue_Complete(json);

elseif (json.name == "load_complete_edge") _this.load_complete_edge(json);

elseif (json.name == "state_change") _this.state_change(json);

};

服务端上传代码

using System;

using System.Web;

using System.IO;

namespace WordPasterCK4

{

publicpartialclassupload : System.Web.UI.Page

{

protectedvoid Page_Load(object sender, EventArgs e)

{

string fname = Request.Form["UserName"];

int len = Request.ContentLength;

if (Request.Files.Count > 0)

{

DateTime timeNow = DateTime.Now;

string uploadPath = "/upload/" + timeNow.ToString("yyyyMM") + "/" + timeNow.ToString("dd") + "/";

string folder = Server.MapPath(uploadPath);

//自动创建目录

if (!Directory.Exists(folder)) Directory.CreateDirectory(folder);

HttpPostedFile file = Request.Files.Get(0);

//原始文件名称,由控件自动生成。

string nameOri = file.FileName;

string ext = Path.GetExtension(nameOri).ToLower();

string filePathSvr = Path.Combine(folder, nameOri);

Response.Write(uploadPath + nameOri);

}

}

}

}

处理后的效果,能够批量上传word中所有的图片

图片上传后保存在服务器端

3、处理ueditor提供的uploadimage方法

客户已经使用半年,没有问题,非常有用,非常方便的功能

有需要的朋友可以下载:http://blog.ncmem.com/wordpress/2019/08/07/ueditor复制word图片粘贴上传-2/

原文地址:https://www.cnblogs.com/songsu/p/11334528.html

时间: 2024-10-23 07:21:16

让富文本编辑器支持复制doc中多张图片直接粘贴上传的相关文章

PHP UEditor富文本编辑器 显示 后端配置项没有正常加载,上传插件不能正常使用

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问题,但是上传到服务器上之后,上传图片.视频等文件的时候出错,显示后端配置项没有正常加载,上传插件不能正常使用!如图: 解决方法 可以测试一下 php 代码是否正确执行,在浏览器打开 ueditor/controller.php 对应的路径,看看是否有下面的返回值. { state: "请求地址出错&

百度editor富文本编辑器在火狐浏览器中的兼容性

最近做项目的时候遇到了百度的一个神器:editor富文本编辑器.但是也遇到了很多兼容性的问题,现在写一段随笔一起分享一下: 第一:在火狐浏览器中,该编辑器部分的编辑功能按钮不能显示 可以看出,在火狐浏览器中只会显示编辑框,而上面的编辑按钮缺没有.(但是在IE7,IE8上不能显示的原因在于新版本中屏蔽了 anonymous()方法,可以通过修改eWebEditor的JS文件来修正错误) 解决方案:打开火狐-->工具栏-->“工具”-->"添加附件",使用搜索功能来搜索“

KindEditor富文本编辑器, 从客户端中检测到有潜在危险的 Request.Form 值

在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='false'  但这样的话   既不安全 也不一定有效,好吧,说说我的解决方法吧, 就是在提交的时候不让富文本的内容提交,先是把内容编码给到一个隐藏标签,然后给富文本赋空值. 1 KindEditor.ready(function (K) { 2 Editor = K.create('#txtIntro

BBS(仿博客园系统)项目05(后台管理功能实现:文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像)

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,

ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: 1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width&qu

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

Simditor 富文本编辑器多选图片上传、视频连接插入

simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firefox.Safari. 点击这里下载zip文件.你也可以安装 Simditor bower 和 npm: $ npm install simditor $ bower install simditor 在 项目中使用 simditor 导入 simditor 样式文件和 js 文件 <link rel

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新