以下討論是基于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 = "編輯器內容……"
〖客戶端〗
獲取:var 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用戶可寫入權限。