CKEditor上传插件
CKEditor上传插件
前言
以下分步具体解释三部分的实现:浏览server端图片或文件。上传图片或文件,CKEditor配置。
浏览server端图片或文件
public ActionResult Browse()
{
var type = Request.QueryString["Type"];
var isImage = !string.IsNullOrEmpty(type) && type.Equals("Images", StringComparison.InvariantCultureIgnoreCase);
ViewBag.IsImg = isImage;
return View();
}
不是ASP.NET MVC的用户。就把它当成是页面载入。
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Browse</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
<link href="/SHTracker/Scripts/TreeView/jquery.treeview.css" rel="stylesheet" type="text/css" />
<link href="/SHTracker/Scripts/TreeView/screen.css" rel="stylesheet" type="text/css" />
<script src="/SHTracker/Scripts/TreeView/jquery.treeview.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body>aside>ul").treeview({
animated: true,
persist: "location",
collapsed: true,
unique: false
});
});
</script>
<style type="text/css">
aside{ border: solid 3px #006400;float: left;width: 20%;height: 100%;padding: 5px;}
section{ float: right;padding: 5px;margin-left: 10px;border: solid 3px #008b8b;width: 70%;height: 100%;}
section ul li{ float: left;padding: 10px;list-style-type: none;}
img{ z-index: 999;cursor: pointer;}
</style>
</head>
<body>
<aside>
<ul>
<li>Home</li>
<ul>
@if ((bool) ViewBag.IsImg)
{
<li>Images
<ul>
@foreach (var dir in Directory.GetDirectories(Server.MapPath("/Images")))
{ <li><a href="@ICStars2_0.Common.UrlHelper.SafeAddQueryToURL("folderpath", Url.Encode(dir.Replace(Server.MapPath("/"), "")), Request.RawUrl)">@Path.GetFileName(dir)</a></li>
}
</ul>
</li>
}
else
{
<li>Docs
<ul>
@foreach (var dir in Directory.GetDirectories(Server.MapPath("/Docs")))
{
<li><a href="@ICStars2_0.Common.UrlHelper.SafeAddQueryToURL("folderpath", Url.Encode(dir.Replace(Server.MapPath("/"), "")), Request.RawUrl)">@Path.GetFileName(dir)</a></li>
}
</ul>
</li>
}
</ul>
</ul>
</aside>
<section>
@if (!string.IsNullOrEmpty(Request.QueryString["folderpath"]))
{
<ul>
@{ var imgTypes = new[] {".jpg", ".gif", ".png"}; }
@foreach (var file in Directory.GetFiles(Server.MapPath("/" + Request.QueryString["folderpath"])))
{
if ((bool) ViewBag.IsImg && imgTypes.Contains(Path.GetExtension(file.ToLower())))
{ <li><img src="/@Request.QueryString["folderpath"].Replace("\\", "/")/@Path.GetFileName(file)" width="100" onclick=" window.opener.CKEDITOR.tools.callFunction(@Request.QueryString["CKEditorFuncNum"], this.src);window.close(); "/></li> }
else
{
<li><a href="javascript:" onclick=" window.opener.CKEDITOR.tools.callFunction(@Request.QueryString["CKEditorFuncNum"], '/@Request.QueryString["folderpath"].Replace("\\", "/")/@Path.GetFileName(file)');window.close(); ">@Path.GetFileName(file)</a></li>
}
} </ul>
}
</section>
</body>
</html>
页面引用了JQUERY,树状菜单部分是jquery的treeview插件,可自行GOOGLE。也可留言,我email给你。
#region = SafeAddQueryToURL =
/// <summary>
/// Add a query to an URL.
/// if the URL has not any query,then append the query key and value to it.
/// if the URL has some queries, then check it if exists the query key already,replace the value, or append the key and value
/// if the URL has any fragment, append fragments to the URL end.
/// </summary>
/// <example>
/// string s = "http://blog.csdn.net/leewhoee/? a=1&b=2&c=3#tag";
/// WL(SafeRemoveQueryFromURL("a",s));
/// WL(SafeRemoveQueryFromURL("b",s));
/// WL(SafeRemoveQueryFromURL("c",s));
/// WL(SafeAddQueryToURL("d","new",s));
/// WL(SafeAddQueryToURL("a","newvalue",s));
/// 输出例如以下:
/// http://blog.csdn.net/leewhoee/?b=2&c=3#tag
/// http://blog.csdn.net/leewhoee/?a=1&c=3#tag
/// http://blog.csdn.net/leewhoee/?a=1&b=2#tag
/// http://blog.csdn.net/leewhoee/? a=1&b=2&c=3&d=new#tag
/// http://blog.csdn.net/leewhoee/?a=newvalue&b=2&c=3#tag
/// </example>
public static string SafeAddQueryToURL(string key, string value, string url)
{
int fragPos = url.LastIndexOf("#");
string fragment = string.Empty;
if (fragPos > -1)
{
fragment = url.Substring(fragPos);
url = url.Substring(0, fragPos);
}
int querystart = url.IndexOf("?");
if (querystart < 0)
{
url += "?" + key + "=" + value;
}
else
{
Regex reg = new Regex(@"(?<=[&\?])" + key + @"=[^\s&#]*", RegexOptions.Compiled);
if (reg.IsMatch(url))
url = reg.Replace(url, key + "=" + value);
else
url += "&" + key + "=" + value;
}
return url + fragment;
}
#endregion #region = SafeRemoveQueryFromURL =
/// <summary>
/// Remove a query from url
/// </summary>
/// <param name="key"></param>
/// <param name="url"></param>
/// <returns></returns>
public static string SafeRemoveQueryFromURL(string key, string url)
{
Regex reg = new Regex(@"[&\? ]" + key + @"=[^\s&#]*&?", RegexOptions.Compiled);
return reg.Replace(url, new MatchEvaluator(PutAwayGarbageFromURL));
}
private static string PutAwayGarbageFromURL(Match match)
{
string value = match.Value;
if (value.EndsWith("&"))
return value.Substring(0, 1);
else
return string.Empty;
}
#endregion
致此,“浏览server端图片或文件”部分就完毕了。
上传图片或文件
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGVld2hvZWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
[HttpPost]
public ActionResult FileUpload()
{
var ckEditorFuncNum = Request.QueryString["CKEditorFuncNum"];
var type = Request.QueryString["Type"];
var isImage = !string.IsNullOrEmpty(type) && type.Equals("Images", StringComparison.InvariantCultureIgnoreCase);
var maxContentLength = isImage ? 512*1024 : 1024*1024;
var file = Request.Files["upload"];
if (file == null)
{
return Content("No file has been chosen!");
}
if (file.ContentLength > maxContentLength)
{
return Content("The image file size should be no bigger than 512KB! The document file size should be no bigger than 1024KB!");
}
var urlpath = string.Empty;
var datestamp = DateTime.Now.ToString("MMddyyyy");
var rootfolderpath = isImage ? "/Images/" : "/docs/";
var folderpath = Server.MapPath(rootfolderpath) + datestamp;
if (file.ContentLength > 0)
{
var filename = Path.GetFileNameWithoutExtension(file.FileName);
var fileextension = Path.GetExtension(file.FileName);
var timestamp = DateTime.Now.ToString("MMddyyyyHHmmssfff");
var filepath = string.Format("{0}/{1}{2}{3}", folderpath, filename, timestamp,
fileextension);
urlpath = string.Format("{4}{0}/{1}{2}{3}", datestamp, filename, timestamp,
fileextension, rootfolderpath);
if (!Directory.Exists(folderpath))
{
Directory.CreateDirectory(folderpath);
}
file.SaveAs(filepath);
}
return
Content(
string.Format(
@"<script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction({0}, ""{1}"");</script>",
ckEditorFuncNum, urlpath));
}
假设你不懂ASP.NET MVC,以下做一些简单的解释。[HttpPost]表明仅仅处理POST请求,return Content("")是返回一个纯文本字符串,其他部分大同小异。唯一值得注意的是最后返回了一段javascript脚本给CKEditor。它促使窗体跳转到Image Info选项卡并把图片URL传递过去,然后预览。例如以下图:
CKEditor配置
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/ CKEDITOR.editorConfig = function (config) {
config.extraPlugins = "autogrow,imagebrowser,filebrowser";
/*config autogrow*/
config.autoGrow_maxHeight = 400;
/*config autogrow end*/
/*config imagebrowser*/
//config.imageBrowser_listUrl = "";
/*config imagebrowser end*/ /*config filebrowser*/
config.filebrowserImageBrowseUrl = '/SHTracker/CKEditor/Browse?type=Images';
config.filebrowserImageUploadUrl = '/SHTracker/CKEditor/FileUpload? type=Images';
config.filebrowserBrowseUrl = '/SHTracker/CKEditor/Browse?type=docs';
config.filebrowserUploadUrl = '/SHTracker/CKEditor/FileUpload?type=docs';
config.filebrowserImageWindowWidth = 640;
config.filebrowserImageWindowHeight = 480;
/*config filebrowser end*/
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.skin = 'Moono';
config.disableNativeSpellChecker = false;
};
extraPlugins里设置了imagebrowser图片浏览和filebrowser文件浏览。然后为其配置处理请求的URL:
config.filebrowserImageBrowseUrl = '/SHTracker/CKEditor/Browse?type=Images';
config.filebrowserImageUploadUrl = '/SHTracker/CKEditor/FileUpload? type=Images';
config.filebrowserBrowseUrl = '/SHTracker/CKEditor/Browse? type=docs';
config.filebrowserUploadUrl = '/SHTracker/CKEditor/FileUpload?type=docs';
请确保你的URL能够正确訪问。此时。这个CKEditor的文件图片上传插件就完毕了。
总结
自已从零開始开发一个富文该编辑器?重复-create家庭的车轮,很少有人愿意去做?我们希望帮助人们谁有需求,假设花钱,请顶一下,非常感谢~~
CKEditor上传插件的更多相关文章
- 基于spring-boot的web应用,ckeditor上传文件图片文件
说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...
- 使用上传插件 Web Uploader 上传图片到七牛云(C#)
之前有写过一篇文章,基于asp.net mvc 封装 Web Uploader 上传插件: http://www.cnblogs.com/vanteking/p/5623682.html 已经实现的功 ...
- CKEditor上传视频(java)
CKEditor上传视频 CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
随机推荐
- HDU 1498 50 years, 50 colors(最小点覆盖,坑称号)
50 years, 50 colors Problem Description On Octorber 21st, HDU 50-year-celebration, 50-color balloons ...
- OCP读书笔记(13) - 管理内存
SGA 1. 什么是LRULRU表示Least Recently Used,也就是指最近最少使用的buffer header链表LRU链表串联起来的buffer header都指向可用数据块 2. 什 ...
- iptables 小结
最近工作上一个作业用到了iptables命令,主要进行端口映射,在网上查了好多资料,尽管有很多例子,但还是整了好几天才整明白.在这里将学习到的知识总结一下.以下均属个人见解.(有一些是从网络中总结的, ...
- Android登陆界面实现-支持输入框清楚和震动效果功能
演示效果 主要代码例如以下 自己定义的一个EditText.用于实现有文字的时候显示能够清楚的button: import android.content.Context; import androi ...
- 1.SQL统计某张表的列数。
select count(syscolumns.name) from syscolumns , sysobjects where syscolumns.id ...
- Ctrl-A全选
Ctrl-A全选这点事(C#,WinForm) 所有的文本框,不管单行多行都Ctrl-A全选就好了吧?是啊,很方便.Windows的软件基本都是这样.可为什么我们自己制作的WinForm就默认不是 ...
- CF 519E(树上倍增求lca)
传送门:A and B and Lecture Rooms 题意:给定一棵树,每次询问到达点u,v距离相等的点有多少个. 分析:按情况考虑: 1.abs(deep[u]-deep[v])%2==1时, ...
- Wix打包系列 (六)制作升级和补丁包
原文:Wix打包系列 (六)制作升级和补丁包 前面我们已经知道怎么制作一个完整安装包了,但我们的软件往往不能一次性就满足客户的需要,当客户需要我们给软件进行升级的时候,我们应该怎么做呢? 在这之前,我 ...
- java 线程 ProducerAndConsumer
package j2se.thread.demo; /** * <p>Project:J2SE 的基础知识</p> * <p>Tile:多线程模拟 生产者 和 消费 ...
- Datameer for Hadoop Solution
Hadoop promises to become a ubiquitous framework for largescale business intelligence, but right now ...