• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>

            Shuffy

            不斷的學習,不斷的思考,才能不斷的進步.Let's do better together!
            posts - 102, comments - 43, trackbacks - 0, articles - 19

            CuteEditor使用手記及高級應用思路

            Posted on 2011-04-30 13:36 Shuffy 閱讀(1090) 評論(0)  編輯 收藏 引用 所屬分類: Web開發技術

            以下討論是基于CuteEditor6.0版本,它的案例可以在這里下載到“CuteEditor6.0多語言版(集成lic文件)”。CuteEditor6.0和CuteEditor5.0是有些地方不一樣的,而網上關于CuteEditor的教程多為把兩者混為一談,又或者教程中沒有特別注明所講軟件版本,這很容易給讀者帶來迷惑。

            比如CuteEditor5.0經本人測試發現默認已支持文件名含中文字符的文件上傳,在CuteSoft_Client\CuteEditor\Configuration\Security\Default.config文件中,也是沒有<security name="filenamePattern" />節點的。另外CuteEditor5.0不支持把上傳的文件自動命名為時間格式,因為在CuteSoft_Client\CuteEditor\Configuration\Security\Default.config文件中沒有<security name="UseTimeStampRenameUploadedFiles">true</security>節點,你就是給它加上也是不起作用的。最后就是CuteEditor5.0在Firefox瀏覽器中運行的不是很好,光標無法定位到編輯器內,解決辦法就是先切換到HTML視圖,然后在切換回普通視圖,此時再在編輯器內單擊光標,就可以把光標定位到編輯器中。

            CuteEditor6.0頁面前端不能用腳本getHTML()獲得編輯器內容,因為getHTML()根本不存在,既不在當前頁面腳本中定義,也在外鏈腳本中也找不找這個方法的定義,而CuteEditor5.0可以(CuteEditor5.0有些腳本方法即使存在,在不同瀏覽器下不一定都能正常工作)。博客園是用了較新版本的CuteEditor,前臺腳本對編輯器內容的驗證只是作了非空驗證,它的代碼是這樣的:

            if (document.getElementById('CE_Editor_Edit_EditorBody_ID') != null && document.getElementById('CE_Editor_Edit_EditorBody_ID').value == '')
            {
              alert("請輸入內容!");
              return false;
            }

            一、第一印象

            第一印象用八個字形容完全不過分,即“功能強大,配置靈活”。

            二、最簡單的配置

            最簡單的配置就是一切使用默認配置,從網上下載這個編輯器后往網站根目錄下對應目錄一丟就完畢。這非常適合首次使用CuteEditor的用戶,他往往想第一時間看看CuteEditor運行起來是什么樣子的。

            現在說說這種最簡單的配置。CuteEditor真正的代碼其實就存在兩個文件夾中,已編譯代碼存在bin目錄,包含(CuteEditor.dll、CuteEditor.ImageEditor.dll、NetSpell.SpellChecker.dll、cuteeditor.lic、*.dic),另一個文件夾就是CuteSoft_Client。其中bin目錄中的NetSpell.SpellChecker.dll和眾多的dic文件是拼寫功能要用到的,使用與否自由決定。

            假設你的網站根目錄為wwwroot,把上面兩個文件夾丟到wwwroot目錄下,然后在wwwroot目錄下新建一個名為“Uploads”的文件夾(大小寫當然無關,通常這個文件夾已在CuteEditor案例包中),這就是編輯器上傳文件默認存放的文件夾。最終的網站目錄結構看起來像下面那樣:

            wwwroot/bin/ CuteEditor.dll
                   CuteEditor.ImageEditor.dll
                   ……

            wwwroot/CuteSoft_Client/CuteEditor/
            wwwroot/CuteSoft_Client/CuteEditor/ Configuration/
                             ……

            現在把bin目錄的CuteEditor.dll添加到VS工具箱,以方便使用,不用自己書寫代碼和設置屬性等。操作方法是打開VS后,在工具箱的“常規”選項卡下右鍵選擇“選擇項”,在出現的對話框中選擇“瀏覽”按鈕,找到bin目錄下的CuteEditor.dll添加即可,此時回到VS窗口,發現工具箱多出了如下控件列表,另外CuteEditor.ImageEditor.dll也可以添加進來。

            此時拖動Editor控件到頁面中,點擊右鍵可以查看編輯器的屬性、事件等,如下圖。

            此時你甚至不設置任何屬性就運行這個頁面,你會發現一切正常了。這時回到網站目錄下發現多出兩個文件來了:1、wwwroot/bin/App_Licenses.dll,2.wwwroot/licenses.licx??疵志椭朗擒浖跈辔募?,不用管它,記得在把網站上傳到服務器的時候,把這兩個文件一起上傳就沒錯了。

            現在講講如何在服務器端和客戶端獲取和設置編輯器的內容。

            〖服務器端〗
               獲取:string editorContent = this.Editor1.Text
              設置:this.Editor1.Text = "編輯器內容……"

            〖客戶端〗
               獲?。簐ar editorContent = document.getElementById('<%=Editor1.ClientID%>').getHTML()
              設置:document.getElementById(' <%=Editor1.ClientID%>').setHTML("編輯器內容……")

            getHTML()和setHTML()兩個客戶端腳本方法在CuteEditor5.0通過,6.0版本不行(“寫在前面”部分內容有講過),但可以這樣document.getElementById('<%=Editor1.ClientID%>').value,這樣得到的值有些字符被編碼了,所以此方法用來驗證一下內容輸入還是可以的,博客園編輯器就是用這種方法驗證非空的。

            三、初級(常見)配置

            使用默認配置顯然在很多場合下是不適用的。現在我特別講講CuteEditor文件上傳控制。CuteEditor可以上傳不同類型的文件(圖片、Flash、音視頻、文檔文件等),可以限制單文件大小和格式,還可以把不同類型文件存在不同的文件夾,并可以控制各文件夾的大小,比如默認情況下圖片等文件都是上傳到wwwroot/Uploads文件夾中的,單張圖片最大限制是200k,圖片最多上傳到100M 。

            這些配置節點都可以在wwwroot \CuteSoft_Client\CuteEditor\Configuration\Security\Default.config文件中進行修改,打開此文件,根據節點的命名,你應該知道各個節點是配置什么屬性的,如果不清楚,請查看我的參考文章。

            因為通常編輯器中要上傳的文件都是圖片文件,所以我根據一個類似新聞發布編輯器進行以下配置,并作說明。

            <security name="OverWriteExistingUploadedFile">true</security>
            <security name="UseTimeStampRenameUploadedFiles">true</security>
            <security name="ImageGalleryPath">~/Admin/NewsImages</security>
            <security name="MaxImageSize">1024</security>
            <security name="MaxImageFolderSize">1024000</security>
            <security name="ImageFilters">
             <item>.jpg</item>
             <item>.jpeg</item>
             <item>.gif</item>
             <item>.png</item>
            </security>

            上面配置表示可以上傳的單張圖片最大為1024k(1M),圖片上傳總容量為1024000k(1G),允許上傳的圖片格式為jpg、jpeg、gif、png,圖片統統上傳到wwwroot/Admin/NewsImages文件夾。其中把UseTimeStampRenameUploadedFiles設為true是讓上傳的圖片在服務器上自動重命名為時間的格式,像這樣“20090711154023805.jpg”,而不是原來的名字。OverWriteExistingUploadedFile設為true是覆蓋存在的同名文件,如果這個選項不打開,在本地電腦有兩張同名圖片,其實圖片內容是不一樣的,都是無法同時上傳的。其它類型文件配置同理。

            另外在CuteEditor控件屬性列表中可以修改以下三個常用屬性:

            (1)AutoConfigure="Simple" 編輯器工具欄按鈕顯示復雜度(多少)選項,這里選擇簡單的,即較少按鈕那種編輯器界面。
            (2)CustomCulture="zh-CN" 對于多國語言版本,這里可以設置成對應的語言,這是設為“中文”。
            (3)ThemeType="Office2003_BlueTheme" 設置編輯器風格,從Window系統主題去理解你就清楚了。

            四、更多配置

            在一開始的時候我就說過CuteEditor的配置是很靈活的,配置的選項也是特別多,一方面我們可以在VS屬性欄改一部分配置,也可以在cs代碼中動態改變屬性,這都是針對一個編輯器實例的,也可以改wwwroot\CuteSoft_Client\CuteEditor\Configuration文件下的各個配置文件,這些通常是全局的,比如像上面那樣,把圖片指定保存在wwwroot/Admin/NewsImages,這樣你在幾個地方使用了編輯器,圖片都是保存在下面文件夾的。具體怎么改呢?CuteEditor都有哪些屬性?可以參考官方文檔。配置太多了,我都只是了解了點皮毛。

            另外在wwwroot\CuteSoft_Client\CuteEditor\Configuration\Security下可以看到有三個文件:Admin.config、Default.config、Guest.config,這是為不同用戶角色準備的。至于每個編輯器實例要使用那個配置文件,可以在CuteEditor控件的屬性窗口改變SecurityPolicyFile屬性的值。在實際應用中,在同一個頁面為不同會員等級的用戶分配不同的配置文件,一方面可以根據用戶權限選擇顯示對應的Panel,每個Panel放置調用不同配置文件的編輯器實例,另一個更好的辦法就是在代碼中動態改變SecurityPolicyFile的屬性值。

            五、其它高級應用思路

            (1)為每個用戶分配屬于自己的上傳文件夾。

            比如你把CuteEditor編輯器用在多用戶博客系統中,你將需要這種解決方案。博客園(cnblogs.com)就是用CuteEditor編輯器的一個案例。下面代碼實現把每個用戶上傳文件存放到Uploads目錄下以他用戶名命名的子文件夾中:

            string userName = Session["UserName"].ToString();
            fullPath = Server.MapPath("Uploads\\") + userName;
            if (!Directory.Exists(fullPath))
            {
              Directory.CreateDirectory(fullPath);
            }
            this.Editor1.SetSecurityGalleryPath("~/Uploads/" + userName);

            (2)為不同等級用戶分配不同大小的文件上傳空間。

            比如QQ移動硬盤分配給用戶的大小免費與收費當然是不一樣的。在一些多用戶博客系統中,為了激勵一些積極的博主,可以為某些用戶開綠色通道,提供更大的文件存儲空間。CuteEditor一樣可以實現這樣的功能。實現思路是在wwwroot\CuteSoft_Client\CuteEditor\Configuration\Security文件夾下建立多個配置文件(默認已有三個配置文件了),每個文件對應一種用戶權限,然后在調用編輯器的頁面的代碼頁動態改變編輯器的SecurityPolicyFile屬性,把其屬性值設置為Security目錄下對應配置文件的名字就行了。

            六、注意事項

            (1)文件名含中文字符的文件無法上傳問題。

            編輯CuteSoft_Client\CuteEditor\Configuration\Security\Default.config文件,找到節點<security name="filenamePattern" />,修改成<security name="filenamePattern">^[a-zA-Z0-9\._\s-\u4e00-\u9fa5]+$</security>,然后保存即可。

            (2)授權問題。

            如果使用的編輯器沒有許可文件將出現授權提示,影響你正常使用,請購買許可。我用的是特別版,當然不可用于商業用途。許可文件就是根目錄下的“licenses.licx”文件。

            (3)應用主題(Theme)設置后,編輯器上傳圖片等對話框出錯問題。

            這個錯誤是.Net運行錯誤,根據錯誤信息可以知道對應那個對話框頁面的<head>標簽缺少“runat=”Server””屬性。找到對應的錯誤頁,加上那個runat屬性,使其最終看起來像這樣就行了:<head runat="server">。

            (4)Uploads目錄權限問題。

            就是在服務器上要為編輯器上傳文件的文件夾開放everyone用戶可寫入權限。

            久久久久亚洲爆乳少妇无| 久久精品aⅴ无码中文字字幕不卡 久久精品aⅴ无码中文字字幕重口 | 久久久免费精品re6| 欧洲国产伦久久久久久久 | 色噜噜狠狠先锋影音久久| 久久久无码一区二区三区| 久久无码国产专区精品| 天堂无码久久综合东京热| 久久久久国产日韩精品网站| 99久久综合国产精品二区| 99久久精品免费观看国产| 99久久人人爽亚洲精品美女| 99久久99久久精品国产| 久久99精品久久久久久水蜜桃| 中文精品久久久久国产网址| 国产精品激情综合久久| 国产精品99久久久久久宅男| 久久综合给合综合久久| 国产成年无码久久久免费| 人妻久久久一区二区三区| 久久超碰97人人做人人爱| 国产精品免费福利久久| 精品一区二区久久| 久久综合狠狠综合久久97色| 色综合久久中文字幕无码| 久久久中文字幕| 精品国产乱码久久久久软件| 久久久久亚洲AV成人片| 精品久久久久国产免费| 久久久一本精品99久久精品88| 久久久久人妻一区精品性色av| 国产精品狼人久久久久影院| 青青草原综合久久大伊人| 久久国产精品久久精品国产| 久久亚洲国产精品123区| 久久久久国产精品熟女影院| 国产香蕉97碰碰久久人人| 精品国产99久久久久久麻豆| 久久综合综合久久狠狠狠97色88 | 国内精品久久国产| 日韩精品国产自在久久现线拍|