CKEditor在asp.net上使用的圖例詳解


  去年的時候自己用過CKEditor,感覺自己掌握的不怎么好,今天重新好好地學習研究一下,發現很多問題,在IE10上CKEditor的工具欄編輯器不再顯示了,不管怎么弄就是那樣,結果查詢了一下,IE10對CKEditor有兼容性問題。結果自己在Chrome瀏覽器上試了下,沒有問題,呵呵,原來是IE依舊需要發展啊。

  不管怎么說吧,今天把自己學習的詳細步驟提供給大家參考,有什么問題,請留言。

  我的代碼源文件,CKEditor和CKFinder的下載http://download.csdn.net/detail/heikeyuit/5476719

                      或者:http://ishare.iask.sina.com.cn/f/37149751.html

  1、官方網站(http://cksource.com)上下載獲得CKEditor和CKFinder的最新版。這里是我上傳的我是用的版本及例子。

  2、兩個文件夾東西真的是很多,內容很全面,但是我們用的的東西不是全部,所以是挑選我們需要的東西添加到項目中去。這個是項目中CKEditor和CKFinder包含文件的截圖

  3、在前台添加代碼

<head runat="server">
    <title></title> 
    <script src="JS/ckedit/ckeditor.js" type="text/javascript"></script>  <!--必寫的東西-->
    <style type="text/css">
        .ckeditor
        {}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" 
            CssClass="ckeditor" Height="207px" Width="517px"></asp:TextBox>
    </div>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="顯示" /> <!--按鈕點擊 后台產生的事件-->
    </form>
</body>

  4、CKEditor 本身不自帶上傳功能,所以需要配合CKFinder才可以實現上傳。

    (1)、項目添加引用CKFinder.dll

    (2)、配置CKEditor的config.js (目錄:/CKEditor/config.js ) 在CKEDITOR.editorConfig函數里加上,不需要的功能可以去掉

      代碼如下:

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    var ckfinderPath = "/JS";   //注意這個地方的問題,JS是包含CKEditor和CKFinder的文件夾
    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
};

配置完成后CKEditor 就帶有上傳功能了,但假如上傳圖片,flash,以及其他文件時,文件如果用原來文件的名字,可能會出現重名的問題,

所以就要將文件名改為隨機文件名。

  5、修改CKFinder的源碼。CKFinder自帶有源碼,目錄:/CKFinde/_source,打開項目,

    (1)、 打開/Settings/ConfigFile.cs文件,修改的地方,請看特殊標記

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using System.Text.RegularExpressions;

namespace CKFinder.Settings
{
    public class ConfigFile : System.Web.UI.UserControl
    {
        public string LicenseName;
        public string LicenseKey;
        public string BaseUrl;
        public string BaseDir;
        public bool RandomReName; //隨機重命名
        public bool SecureImageUploads;
        public bool ForceSingleExtension;
        public bool CheckDoubleExtension;
        public bool CheckSizeAfterScaling;
        public bool DisallowUnsafeCharacters;
        public string[] HtmlExtensions;
        public string[] Plugins;
        public Hashtable PluginSettings;

        public string DefaultResourceTypes;

        private Thumbnails _Thumbnails;
        private Images _Images;
        private AccessControlManager _AccessControl;
        private ResourceTypeManager _ResourceType;

        private string[] _HideFolders;
        private string[] _HideFiles;

        internal Regex HideFoldersRegex;
        internal Regex HideFilesRegex;

        public string RoleSessionVar;

        private static ConfigFile _Current;

        public ConfigFile()
        {
            _Thumbnails = new Thumbnails();
            _Images = new Images();
            _AccessControl = new AccessControlManager();
            _ResourceType = new ResourceTypeManager();

            this.HideFolders = new string[ 0 ];
            this.HideFiles = new string[ 0 ];

            LicenseName = "";
            LicenseKey = "";
            BaseUrl = "/ckfinder/userfiles/";
            BaseDir = "";
            RandomReName = true;
            ForceSingleExtension = true;
            CheckSizeAfterScaling = true;
            DisallowUnsafeCharacters = true;
            CheckDoubleExtension = true;
            DefaultResourceTypes = "";
            HtmlExtensions = new string[ 0 ];
            Plugins = new string[ 0 ];
            PluginSettings = new Hashtable();
            RoleSessionVar = "";
        }
    /*-----后面內容已經省略------------*/
} }

    (2)、打開/Connector/Config.cs文件,

      定位60行左右,添加一個屬性:

      

      public bool RandomReName

      {

        get { return Settings.ConfigFile.Current.RandomReName; }

      }

 

    (3)、打開/Connector/CommandHandlers/FileUploadCommandHandler.cs文件,添加一句判斷代碼,下面顯示的是部分代碼,添加的代碼已經標注

      

using System;
using System.Web;
using System.Text.RegularExpressions;

namespace CKFinder.Connector.CommandHandlers
{
    public class FileUploadCommandHandler : CommandHandlerBase
    {
        public FileUploadCommandHandler()
            : base()
        {
        }
        public static string sFileName=null;
        public override void SendResponse( System.Web.HttpResponse response )
        {
            int iErrorNumber = 0;
            //string sFileName = "";
            string sFilePath = "";
            string sUnsafeFileName = "";

            try
            {
                this.CheckConnector();
                this.CheckRequest();

                if ( !this.CurrentFolder.CheckAcl( AccessControlRules.FileUpload ) )
                {
                    ConnectorException.Throw( Errors.Unauthorized );
                }

                HttpPostedFile oFile = null;
                if ( HttpContext.Current.Request.Files["upload"] != null )
                {
                    oFile = HttpContext.Current.Request.Files["upload"];
                }
                else if ( HttpContext.Current.Request.Files["NewFile"] != null )
                {
                    oFile = HttpContext.Current.Request.Files["NewFile"];
                }
                else if ( HttpContext.Current.Request.Files.AllKeys.Length > 0 )
                {
                    oFile = HttpContext.Current.Request.Files[HttpContext.Current.Request.Files.AllKeys[0]];
                }

                if ( oFile != null )
                {
                    sFileName = oFile.FileName;

                    if ( Config.Current.CheckDoubleExtension )
                        sFileName = this.CurrentFolder.ResourceTypeInfo.ReplaceInvalidDoubleExtensions( sFileName );

                    sUnsafeFileName = sFileName;
                    
                    if ( Config.Current.DisallowUnsafeCharacters )
                        sFileName = sFileName.Replace(";","_");

                    // Replace dots in the name with underscores (only one dot can be there... security issue).
                    if ( Config.Current.ForceSingleExtension )
                        sFileName = Regex.Replace( sFileName, @"\.(?![^.]*$)", "_", RegexOptions.None );

                    if ( sFileName != sUnsafeFileName )
                        iErrorNumber = Errors.UploadedInvalidNameRenamed;

                    if ( Connector.CheckFileName( sFileName ) && !Config.Current.CheckIsHiddenFile( sFileName ) )
                    {
                        if ( !Config.Current.CheckSizeAfterScaling && this.CurrentFolder.ResourceTypeInfo.MaxSize > 0 && oFile.ContentLength > this.CurrentFolder.ResourceTypeInfo.MaxSize )
                            ConnectorException.Throw( Errors.UploadedTooBig );

                        string sExtension = System.IO.Path.GetExtension( sFileName );
                        sExtension = sExtension.TrimStart( '.' );
                        if (Config.Current.RandomReName) //使用隨機名 { sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension; }
            /*剩下的部分代碼已經省略,詳細代碼請查看我的項目代碼,下載地址為*/
          }
        }
      } } }

    4) 重新生成項目,在bin文件夾中,找到CKFinder.dll,對於第一個項目重新添加對於CKFinder.dll的引用,最后一步:打開/ckfinder/config.ascx

   在SetConfig()中,添加一屬性:(其實這個加不加都可以的,因為之前有設置默認值,但使用原名時一定要設置為false)

    RandomReName = true;//上傳完畢后使用隨機文件名

好了,到此已經配置成功了。我的代碼源文件,CKEditor和CKFinder的下載地址http://download.csdn.net/detail/heikeyuit/5476719

                                或者:http://ishare.iask.sina.com.cn/f/37149751.html

給大家秀秀我的項目的顯示效果

  6,配置成功后,我發現了,如果我想在我的項目中,查詢我上傳的文件的路徑,1種方法是根據自己的配置項BaseUrl,,然后在加上部分路徑,就可以查詢到自己上傳文件的路徑,但是這個真的不是很好;第二種方法是對示例進行修改,然后,添加對其的引用,然后添加對於函數或屬性的調用,但是這樣的工作量很大啊,我最后跳過來,調過去,最后感覺別人封裝的就是有一定的道理的,如果改變的部分代碼的訪問權限,可能以后使用就會對於代碼的重要部分進行錯誤性的修改,這樣很不好啊,所以,如果大家真的想調用里面的代碼,我希望大家使用程序集-反射,這個方法真的是很有效啊,不會更改到程序集的內容啊。

好了,閑話少說了,現在就是希望大家關於IE與CKEditor的兼容性,提供很好地解決方案。

 我的代碼源文件,CKEditor和CKFinder的下載地址http://download.csdn.net/detail/heikeyuit/5476719

                      或者:http://ishare.iask.sina.com.cn/f/37149751.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM