TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5
编辑器上传图片一般都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间里面,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编辑器内容中的<img>标签src中的base64图片(保存成图片文件并返回相对地址字符串替换原来的base64编码图片,测试在新的TinyMCE编辑器(Version: 5.0.12 (2019-07-18))通过。浏览器为chrome
代码:
tinymce.init({
selector: 'textarea#Content',
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave ',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
menubar: false,
height: 500,
language: 'zh_CN',
images_upload_handler: function (blobInfo, success, failure) {
var reader = new FileReader();
reader.readAsDataURL(blobInfo.blob());
reader.onload = function () {
success(this.result);
}
}
});
plugins插件及toolbar工具栏内容自行删减添加,主要是 images_upload_handler这里,不知是TinyMCE5.x版本很强大,还是浏览器本身功能,编辑器中会自动base64编码与blob:http://协议互转。你在源码上看到的是非base64编码
后台用到Regex类Replace方法的高级用法:此方法有个委托参数,用这参数可以传入一个方法,在这个方法里面进行主要操作(保存base64到空间中并返回图片地址的引用字符串)
后台asp.net(c#)代码:
public static string SaveBase64ToImageAndOutUrl(string htmlContent)
{
// 定义正则表达式用来匹配 img 标签 src属性中的base64代码
string strImg = @"data\:image/(jpeg|png|gif|jpg|bmp);base64\,(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?"; string content = Regex.Replace(htmlContent, strImg, new MatchEvaluator(CorrectString), RegexOptions.Compiled | RegexOptions.IgnoreCase);
return content;
} private static string CorrectString(Match match)
{
string imgSrc = match.Value;
if (imgSrc.Substring(0, 10) != "data:image")
return imgSrc; double size = imgSrc.Split(',')[1].TrimEnd('=').Length * .75;
if (size > Config.SiteConfig.ImageUploadSize * 1048576)
throw new Exception("内容中有些图片过大!"); Response rsp = Upload.Base64ToImageAndSave(imgSrc, "/Upload");
if (rsp.Code == 0)
throw new Exception(rsp.Message); return rsp.Data;
}
上面代码涉及到的类Respones
public class Response
{
/// <summary>
/// 返回代码. 0-失败,1-成功
/// </summary>
public int Code { get; set; } /// <summary>
/// 返回消息
/// </summary>
public string Message { get; set; } /// <summary>
/// 返回数据
/// </summary>
public dynamic Data { get; set; } public Response()
{
Code = 0;
}
}
上面的base64保存图片的方法,请参考博客园里其他大侠写的,好多好多,我就不再贴上来了
缺点就是客户端查看源代码时会很慢,另外图片多或图片大时提交数据时要在web.config中设置,不然提交不了。这里设置了6MB,可以根据需要设置大小
<system.web>
<!-- 表单提交处理总长度(maxRequestLength)为6MB -->
<httpRuntime maxRequestLength="6291456"/>
</system.web>
TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5的更多相关文章
- 多图片上传(base64方式传至后台)
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" conten ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- 2.0 vue2+tinymce实现图片上传与回显
1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...
- Ueditor编辑器图片上传到万象优图
最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...
- 关于Discuz!nt论坛编辑器图片上传bug,flash域的问题
正在整discuz!nt,现在没有什么人弄了把? 上个星期突然来了个bug,搞死我了,论坛图片不能上传,上传卡在100%没反应了,于是我发现ajax发送到AttachUpload.cs时queryst ...
- 富文本编辑器TInyMCE,本地图片上传(Image Upload)
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
随机推荐
- 测试工程师技术tree(“自言自语”)
理论部分 1.测试分为哪几个阶段 2.测试的流程是什么 3.如何做好测试计划 4.常见的测试用例设计方法有哪些 5.一条bug记录包含哪些内容 5.如何分层自动化测试 6.如何保证脚本的有效性 7.如 ...
- PHP面试题2019年奇虎360面试题及答案解析
一.单选题(共29题,每题5分) 1.以下代码 a.php 输出的结果是? a.php 的代码如下: b.php的代码如下: A.foo in a B.什么也不输出 C.报错 D.foo in b 参 ...
- Ubuntu的系统应用
1:最近在苹果笔记本做了双系统,启动电脑后还是蛮酷的,但是ubuntu系统安好后,没有wifi图标,于是必须连接有线网络,更新数据包才可以. 2: 常用命令 查看软件xxx安装内容#dpkg ...
- 一个java的http请求的封装工具类
java实现http请求的方法常用有两种,一种则是通过java自带的标准类HttpURLConnection去实现,另一种是通过apache的httpclient去实现.本文用httpclient去实 ...
- [转]关于maven pom.xml中dependency type 为pom的应用
原文地址:http://blog.csdn.net/yao123long/article/details/49925659 dependency为什么会有type为pom,默认的值是什么?depend ...
- [转]Eclipse插件开发之基础篇(1) 插件开发的基础知识
原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/13/eclipse_plugin_1_0_2.html 名词翻译 有一些名词在翻译的过程中可能 ...
- PHP将字符串转数组
explode(',',$arr_string) //将字符串转数组 $arr_string = '1,2,3'; $arr = explode(',',$arr_string); dump($arr ...
- [日常] gitlab创建用户并把用户加入项目
在gitlab里创建用户 默认密码是要求创建的用户自己去邮箱重置,也可以创建完成后直接点击编辑,就可以更改密码了 创建完用户,用户登录的时候需要去重置密码 创建完项目,就可以去使用了 也可以为这个项目 ...
- 『008』Zabbix
『006』索引-Monitoring Zabbix [001]- 点我快速打开文章[001-Zabbix 服务安装] [002]- 点我快速打开文章[002-Zabbix 前端配置] 更新中
- Apache(基于端口号)
1.配置服务器的IP地址 2. 创建网站数据目录 (1).分别创建端口为6111,6222的网站数据目录 (2).分别在网站数据目录中写入不同的内容 3.在配置文件中描述基于端口号的虚拟主机 (1) ...