ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦。
1、只粘贴图片并上传到服务器
config.extraPlugins = 'uploadimage';
//config.uploadUrl = '上传路径';
config.imageUploadUrl= '上传路径';
请求
文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。
响应:文件已成功上传
当文件成功上传时的JSON响应:
uploaded- 设置为1。
fileName - 上传文件的名称。
url - 上传文件的URL。
响应:文件无法上传
uploaded- 设置为0。
error.message - 要显示给用户的错误消息。
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);
//原始文件名称,由控件自动生成。
//md5.png,crc.png,uuid.png,sha1.png
string nameOri = file.FileName;
string ext = Path.GetExtension(nameOri).ToLower();
//只支持图片上传
if ( ext == ".jpg"
|| ext == ".jpeg"
|| ext == ".png"
|| ext == ".gif"
|| ext == ".bmp")
{
string filePathSvr = Path.Combine(folder, nameOri);
//
if(!Directory.Exists(filePathSvr)) file.SaveAs(filePathSvr);
Response.Write("http://10.168.4.209:83" + uploadPath + nameOri);
}
}
}
}
}
2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持
目前项目是用了一种变通的方式:
先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示
(富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下
var WordPasterConfig = {
"EncodeType" : "GB2312"
, "Company" : "荆门泽优软件有限公司"
, "Version" : "1,5,131,51655"
, "License2": ""
, "Debug" : false//调试模式
, "LogFile" : "f:\\log.txt"//日志文件路径
, "PasteWordType" : ""//粘贴WORD的图片格式。JPG/PNG/GIF/BMP,推荐使用JPG格式,防止出现大图片。
, "PasteImageType" : ""//粘贴文件,剪帖板的图片格式,为空表示本地图片格式。JPG/PNG/GIF/BMP
, "PasteImgSrc" : ""//shape:优先使用源公式图片,img:使用word自动生成的图片
, "JpgQuality" : "100" //JPG质量。0~100
, "QueueCount" : "5"//同时上传线程数
, "CryptoType" : "crc"//名称计算方式,md5,crc,sha1,uuid,其中uuid为随机名称
, "ThumbWidth" : "0"//缩略图宽度。0表示不使用缩略图
, "ThumbHeight" : "0"//缩略图高度。0表示不使用缩略图
, "FileFieldName" : "file"//自定义文件名称名称
, "ImageMatch" : ""//服务器返回数据匹配模式,正则表达式,提取括号中的地址
, "FormulaDraw" : "gdi"//公式图片绘制器,gdi,magick
, "AppPath" : ""
, "Cookie" : ""
, "Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)
, "IcoError" : "http://www.ncmem.com/products/word-imagepaster/ckeditor353/WordPaster/error.png"
, "IcoUploader" : "http://www.ncmem.com/products/word-imagepaster/ckeditor353/WordPaster/upload.gif"
, "PostUrl" : "http://www.ncmem.com/products/word-imagepaster/fckeditor2461/asp.net/upload.aspx"
//x86
, "ClsidParser" : "2404399F-F06B-477F-B407-B8A5385D2C5E"
, "CabPath" : "http://www.ncmem.com/download/WordPaster2/WordPaster.cab"
//x64
, "ClsidParser64" : "7C3DBFA4-DDE6-438A-BEEA-74920D90764B"
, "CabPath64" : "http://www.ncmem.com/download/WordPaster2/WordPaster64.cab"
//Firefox
, "XpiType" : "application/npWordPaster2"
, "XpiPath" : "http://www.ncmem.com/download/WordPaster2/WordPaster.xpi"
//Chrome
, "CrxName" : "npWordPaster2"
, "CrxType" : "application/npWordPaster2"
, "CrxPath" : "http://www.ncmem.com/download/WordPaster2/WordPaster.crx"
//Edge
, edge: { protocol: "wordpaster", port: 9200, visible: false }
, "ExePath": "http://www.ncmem.com/download/WordPaster2/WordPaster.exe"
, "mac": {path: "http://www.ncmem.com/download/WordPaster2/WordPaster.exe"}
};
3、官方刚发表新版本说已经添加功能:
ckeditor编辑器批量上传的效果
图片已经上传到服务器端
图片地址已经替换过来了
可以看得出来,效果和用户体验都非常好。用户借助于此功能编辑功能得到大幅度提升了。
详细配置信息可以参考这篇文章:
ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传的更多相关文章
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
- 项目页面集成ckeditor富文本编辑器
步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...
- 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器
使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...
- ckeditor富文本编辑器的基本配置设置:
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
- Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...
- PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...
- Extjs整合CKEditor富文本编辑器插件
CKEditor插件官方下载地址: http://ckeditor.com/download/releases 我使用的版本是 ExtJS5.1.0 CKEditor4.4.8 参考文章: http ...
随机推荐
- HTTP代理(转)
个人总结: 两篇文章介绍了https代理的两种方式: ·一种是普通http请求代理 ·一种是通过隧道进行基于tcp的代理 转两篇好文: HTTP 代理原理及实现(一) https://imququ.c ...
- vue组件兄弟间通信
四.兄弟组件间通信(event) 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发 var bus = new Vue(); bus.$emit()bus.$on() 熊 ...
- Vue Router:使用 props 将组件和路由解耦
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 可以使用 props 将组件和路由解耦. 一 路由配置(布尔模式): impo ...
- js 相关好文章推荐
1.关于xmlhttprequest https://segmentfault.com/a/1190000004322487 2.XMLHttpRequest2 新技巧 https://www.htm ...
- vue项目 多文件上传并显示在页面上
<template> <label for="file" class=" btn btn-default" style="borde ...
- VSL基础
VSL是Virtools提供的一个非常有创意的脚本语言,它以输写代码的方式(区别于Virtools现有的图形化编程界面)进行编程开发,提高了程序的可读性和工作效率. 下图的功能是:将一个3D物体拷贝出 ...
- mysql字符串拆分实现split功能
转自:https://blog.csdn.net/pjymyself/article/details/81668157有分隔符的字符串拆分题目要求数据库中 num字段值为: 实现的效果:需要将一行数据 ...
- Java包的使用
好处 1.类似于文件系统的文件夹,可以实现分类管理类文件,方便查找2.解决了同一个项目中同名类的冲突问题 包的创建 命名规范: 建议小写字母,并且采用域名倒置的写法 域名倒置:com.baidu ww ...
- Java 类在 Tomcat 中是如何加载的?
作者 :xingoo https://www.cnblogs.com/xing901022/p/4574961.html 说到本篇的Tomcat类加载机制,不得不说翻译学习Tomcat的初衷. 之前实 ...
- kotlin学习(1)基础
所有笔记整理自电子工业出版社的<Kotlin实战>一书 变量声明: 类型放在变量名后面: val name:String="aaaa" ,String可以省略,因为可以 ...