CKEditor上传插件


前言


CKEditor上传插件是不是免费的，与您分享在此开发。这个插件是基于ASP.NET MVC下开发的，假设是webform的用户或者其他语言的用户。能够參考把server端做对应的改动。看图：



大家能够看到Browse Button和Upload选项卡。

以下分步具体解释三部分的实现：浏览server端图片或文件。上传图片或文件，CKEditor配置。



浏览server端图片或文件


先上图：



做了一个十分简易的浏览页面。左半部分是目录树。右半部分则显示当前目录中的图片。


ASP.NET MVC中Controller中浏览页面的action代码例如以下(即页面相应的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的用户。就把它当成是页面载入。

View（即页面代码）代码例如以下：

@{

    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给你。

当中的ICStars2_0.Common.UrlHelper.SafeAddQueryToURL方法。事实上是我比較懒了随便GOOGLE了一个使用，就是给URL加入參数。代码例如以下：

#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="">




(最后改动 2014/6/11)

由于这个弹框是CKEditor提供的，我们仅仅须要处理请求。以下是处理WEB请求的ACTION(能够用不论什么语言处理些请求，逻辑上大体同样)：

[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。


CKEditor配置



CKEditor里有一个配置文件config.js，我们仅仅须要设置几个链接就能够了。代码例如以下：

/**

 * @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的文件图片上传插件就完毕了。



总结


相信不愿意花钱买CKEditor插件的朋友一定用的上此功能。对于一个富文本编辑器。怎么能没有文件图片上传功能呢？CKEditor又这么简单好用，功能强大，实在没有勇气放弃它而去选择其他的产品。

自已从零開始开发一个富文该编辑器？重复-create家庭的车轮，很少有人愿意去做？我们希望帮助人们谁有需求，假设花钱，请顶一下，非常感谢~~








CKEditor上传插件的更多相关文章

  1. 基于spring-boot的web应用，ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  2. 使用上传插件 Web Uploader 上传图片到七牛云（C#）

    之前有写过一篇文章,基于asp.net mvc 封装 Web Uploader 上传插件: http://www.cnblogs.com/vanteking/p/5623682.html 已经实现的功 ...

  3. CKEditor上传视频(java)

    CKEditor上传视频 CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ ...

  4. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  5. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  6. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  7. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  8. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  9. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

随机推荐

  1. HUST 1569(Burnside定理+容斥+数位dp+矩阵快速幂)

    传送门:Gift 题意:由n(n<=1e9)个珍珠构成的项链,珍珠包含幸运数字(有且仅由4或7组成),取区间[L,R]内的数字,相邻的数字不能相同,且旋转得到的相同的数列为一种,为最终能构成多少 ...

  2. junit4同一时候測试多个測试类

    两个分别须要的測试类 TestSuit001 package com.test.junit; import org.junit.Test; public class TestSuit001 { @Te ...

  3. ZOJ 1171 Sorting the Photos

    1. 题目描述 给你一叠照片,有的正面朝上,有的反面朝上,朝上的用字母U,朝下的用字母D 可以从一个位置开始到最顶端,把这一叠拿出来,反转,然后再放回那一叠照片上面. 试求出最少的翻转次数,使所有的照 ...

  4. Storyboard 经常用法总结－精华版

    1.prepareForSegue: Now we know what the destinationViewController is we can set its data properties. ...

  5. 【OpenCV新手教程第14】OpenCVHough变换：霍夫变换线，霍夫变换圆汇编

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/26977557 作者:毛星云(浅墨) ...

  6. Android架构设计和软硬整合完整训练

    Android架构设计和软硬整合完整训练 Android架构设计和软硬整合完整训练:HAL&Framework&Native Service&Android Service&a ...

  7. Cocos3d初探

    预计要相当长的一段时间内研究游戏引擎,在这里做一下过程中的备忘. 上一周项目须要,研究了一下cocos2d-x,本周接着来做cocos3d-x的代码研究 首先是搭建cocos3d-x的开发环境: 依据 ...

  8. Android开发 - ActivityLifecycleCallbacks用法初探

    ActivityLifecycleCallbacks是什么? Application通过此接口提供了一套回调方法,用于让开发人员对Activity的生命周期事件进行集中处理. 为什么用Activity ...

  9. JMX操作ActiveMQ(1)

    我们知道ActiveMQ broker的管理接口是通过JMX方式提供的. 一个简单的访问方式就是通过jconsole,输入 service:jmx:rmi:///jndi/rmi://localhos ...

  10. poj - 1170 - Shopping Offers（减少国家dp）

    意甲冠军:b(0 <= b <= 5)商品的种类,每个人都有一个标签c(1 <= c <= 999),有需要购买若干k(1 <= k <=5),有一个单价p(1 & ...