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 id="editor1" 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 name="documentfilters">   //這裡過濾(設定)文檔檔案格式

            <item>.txt</item>

            <item>.doc</item>

            <item>.pdf</item>

            <item>.zip</item>

            <item>.rar</item>

            <item>.swf</item>

            <item>.htm</item>

      </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);

cuteeditor 編輯器添加中文字型

可以修改檔案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                  隸書