CuteEditor 使用詳解
CuteEditor是一款功能非常強大,支持圖片上傳、文件下載和word類似的文字編輯器。對於新聞發布係統和博客之類的係統,是非常的方便的。
那要把它要在asp.net中,有哪些步驟呢?
一、CuteEditor的配置
1、將以下文件考貝到你站點根目錄下的bin內(這些在CuteEditor6.0/bin下都可以找到)
CuteEditor.dll,
CuteEditor.ImageEditor.dll(6.0增加的EditorImage功能),
CuteEditor.lic(解密文件),
NetSpell.SpellChecker.dll(拚寫檢查功能)
注:(“.dic”為擴展名的文件是詞典保存為純文本文件的格式。將CuteEditor6.0/bin文件夾裏的
都拷到站點根目錄下的bin內也可以)
2、將CuteSoft_Client文件夾拷貝到項目的根目錄
CuteSoft_Client包含CuteEditor文件夾和example.css,放了控件圖片,文件之類的數據example.css
它指定了編輯器的樣式。(在2.0下可能要把dialog文件夾裏麵的getfilethub.aspx刪除)
注:FilesPath用來設置所對應的目錄,如:FilesPath="~/admin/CuteSoft_Client/CuteEditor/"
(css可以放在根目錄下,隻是調用的路徑不同而已)
3、在根目錄下建立Uploads的文件夾作為上傳圖片及附件的根目錄
4、將CuteEditor.dll添加到工具箱
先在工具箱空白處右擊選擇“添加選擇項”,給選項卡添加一外名稱為:CuteEditor。再在該選項卡
中右擊,選擇“選擇項 ”,在彈出的對話框的“.NET Frameword組件”標簽中選擇要添加的DLL文件
即可。
5、CuteEditor屬性設置(假設當前頁在根目錄下)
1)AutoConfigure設為simple,即選擇最簡單的界麵顯示方式
2)EditorWysiwygModecss設為:CuteSoft_Client/example.cs,需要把example.css文件放到該目錄下。
3)FilesPath設為:CuteSoft_Client/CuteEditor,設置CuteEditor目錄的路徑
6、控件的調用代碼如下:
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %> 如果是按照第4步
從工具箱中拖放到頁麵的話,則此代碼會自動生成,不需要要手動添加。
<CE:EDITOR runat="server" Width="700px"
FilesPath="~/CuteSoft_Client/CuteEditor/" EditorWysiwygModeCss="../example.css"
ThemeType="Office2003_BlueTheme">
</CE:EDITOR>
二、基本屬性:
EditorWysiwygModeCss :設置樣式
ThemeType :設置風格
AutoConfigure :選擇功能是簡單還是複雜的
Text :設置加載時候默認內容
MaxHTMLLength :設置最大長度
BreakElement :默認“回車”產生什麼HTML
URLType :沒發現有什麼區別
ResizeMode :自動長度(長度設置的幾中形式)
ReadOnly :是否為隻讀
CustomCulture :設置語言類型 china 為zh-cn
EditCompleteDocument :設置是否完整的HTML頁麵代碼(也就是說是不是包括html頭)
AllowPasteHtml :是否允許粘帖HTML代碼
EnableContextMenu :在文本裏是否顯示右鍵菜單
三、CuteEditor文件夾裏的配置
1)控製工具攔顯示:在CuteSoft_Client/CuteEditor/Configuration/AutoConfigure 裏設置
2)控製右鍵顯示:CuteSoft_Client/CuteEditor/Configuration/ContextMenuMode裏設置
3)設置權限:CuteSoft_Client/CuteEditor/Configuration/Security裏設置
例如要設置各種組件的大小等屬性限製,如控製上傳文件的大小等,可在
CuteSoft_Client/CuteEditor/Configuration/Security修改“Security”文件夾中的
“Default.config”文件即可
==========================
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<security name="RestrictUploadedImageDimension">true</security> //是否限製上傳圖象尺寸
<security name="OverWriteExistingUploadedFile">false</security> //如果上傳的文件已經存
在,是否將其覆蓋
<security name="UseTimeStampRenameUploadedFiles">true</security> //重命名為時間
<security name="AutoResizeUploadedImages">true</security> //是否自動調整上傳圖象
<security name="MaxImageWidth">1024</security> //上傳圖象的最大寬度
<security name="MaxImageHeight">768</security> //上傳圖象的最小寬度
<security name="MaxImageSize">1000</security> //上傳圖象文件的最大值
<security name="MaxMediaSize">100</security> //上傳媒體文件的最大值
<security name="MaxFlashSize">100</security> //上傳Flash文件的最大值
<security name="MaxDocumentSize">10000</security> //文檔最大值
<security name="MaxTemplateSize">1000</security> //模板最大值
<security name="ImageGalleryPath">~/uploads</security> //圖象文件上傳路徑
<security name="MediaGalleryPath">~/uploads</security> //媒體文件上傳路徑
<security name="FlashGalleryPath">~/uploads</security> //Flash文件上傳路徑
<security name="TemplateGalleryPath">~/templates</security> //模板路徑
<security name="FilesGalleryPath">~/uploads</security> //文件庫路徑
<security name="MaxImageFolderSize">102400</security> //圖象文件夾最大值
<security name="MaxMediaFolderSize">102400</security> //媒體文件夾最大值
<security name="MaxFlashFolderSize">102400</security> //Flash文件夾最大值
<security name="MaxDocumentFolderSize">102400</security> //文檔文件夾最大值
<security name="MaxTemplateFolderSize">102400</security> //模板文件夾最大值
<security name="ThumbnailWidth">80</security> //最小寬度
<security name="ThumbnailHeight">80</security> //最小高度
<security name="ThumbnailColumns">5</security> //最小列數
<security name="ThumbnailRows">3</security> //最小行數
<security name="AllowUpload">true</security> //是否允許上傳
<security name="AllowModify">true</security> //是否允許修改
<security name="AllowRename">true</security> //是否允許重命名
<security name="AllowDelete">true</security> //是否允許刪除
<security name="AllowCopy">true</security> //是否允許複製
<security name="AllowMove">true</security> <!-- this is rename too --> //是否允許移動
<security name="AllowCreateFolder">true</security> //是否允許創建文件夾
<security name="AllowDeleteFolder">true</security> //是否允許刪除文件夾
<security name="ImageFilters"> //這裏過濾(設置)圖象文件格式
<item>.jpg</item>
<item>.jpeg</item>
<item>.gif</item>
<item>.png</item>
</security>
<security name="MediaFilters"> //這裏過濾(設置)媒體文件格式
<item>.avi</item>
<item>.mpg</item>
<item>.mpeg</item>
<item>.mp3</item>
</security>
<security name="DocumentFilters"> //這裏過濾(設置)文檔文件格式
<item>.txt</item>
<item>.doc</item>
<item>.pdf</item>
<item>.zip</item>
<item>.rar</item>
<item>.avi</item>
<item>.mpg</item>
<item>.mpeg</item>
<item>.swf</item>
<item>.jpg</item>
<item>.jpeg</item>
<item>.gif</item>
<item>.png</item>
<item>.htm</item>
</security>
</configuration>
========================
4)設置工具攔按鈕具體功能:CuteSoft_Client/CuteEditor/Configuration/Shared 裏設置
5)設置工具攔按鈕具體功能:CuteSoft_Client/CuteEditor/Configuration/Shared 裏設置
6)設置語言:CuteSoft_Client/CuteEditor/Configuration/Languages裏設置
7)添加字體:CuteSoft_Client/CuteEditor/Configuration/Shared/Common.config裏設置
感覺 CuteEditor 每處都可以改變,因為它整體思路都是用摸板,具體體現形式寫在配置文件裏麵。
用戶修改配置文件或是它提供的屬性就可以實現自己的功能!
四、CuteEditor的服務器端控製
1)設置編輯器的默認文本:
①Editor1.Text = "Default Text"; //服務器端方法
②var editor = document.getElementByIdx_x('<%=Editor1.ClientID %>'); //JavaScript方法
var editorText = editor.getHTML();
2)修改文件的上傳目錄:Editor1.SetSecurityGalleryPath("~/uploads/jpg");
修改上傳文件的總大小(以Flash為例):Editor1.SetSecurityMaxFlashFolderSize(1000);
修改單個上傳文件的大小(以Flash為例):Editor1.SetSecurityMaxFlashSize(kb); //默認KB為單位
3)多用戶文件夾
由於上傳的文件統一被放置到uploads文件夾中,可以通過程序控製為每個用戶建立一個上傳的文件夾。
代碼如下:
using System.IO;
string username = Session["username"].ToString() ;
fullPath = Server.MapPath("uploads\") + username;
if (!Directory.Exists(fullPath))
{
Directory.CreateDirectory(fullPath);
}
Editor1.SetSecurityGalleryPath("~/uploads/" + username);
可以修改文件CuteSoft_Client\CuteEditor\Configuration\Shared\Common.config來添加字體。
主要注意的地方是該文件是用XML編碼
<item text="FangSong_GB2312" html="<font size=3 face='FangSong_GB2312'>仿宋
</font>"> FangSong_GB2312</item>
<item text="KaiTi_GB2312" html="<font size=3 face='KaiTi_GB2312'>楷體
_GB2312</font>"> KaiTi_GB2312</item>
要在CuteEditor中顯示中文字體,需要將中文字體名稱進行“國際化”,即將漢字字體名稱改為英文名稱,
如將“宋體”改為“Simsun",“黑體”改為"Simhei"等,下麵是部分字體對照列表:
English Name Localized Name
SimSun 宋體
SimHei 黑體
FangSong_GB2312 仿宋_GB2312
KaiTi_GB2312 楷體_GB2312
YouYuan 幼圓
STSong 華文宋體
STZhongsong 華文中宋
STKaiti 華文楷體
STFangsong 華文仿宋
STXihei 華文細黑
STLiti 華文隸書
STXingkai 華文行楷
STXinwei 華文新魏
STHupo 華文琥珀
STCaiyun 華文彩雲
FZYaoTi 方正姚體簡體
FZShuTi 方正舒體簡體
NSimSun 新宋體
LiSu 隸書
最後更新:2017-04-02 22:16:10