[好物介紹] CKEditor For ASP .NET 設定篇

摘要:[好物介紹] CKEditor For ASP .NET 設定篇

安裝好CKEditor之後,基於某些原因我們可能需要修改一些設定。修改的方式有兩種:

(1)修改ckeditor\config.js:適用於套用所有元件。

(2) 修改 .aspx.cs (或 .aspx.vb)檔:適用於套用單一元件。

1. UI語系:根據預設,會套用Language這個屬性(預設是空字串,在此情況下會自動使用在地化的語系, 既ckeditor\lang\xxx.js)。如果失敗則會套用DefaultLanguage屬性(預設是"en")。

(1) 修改ckeditor\config.js:

在CKEDITOR.editorConfig = function (config) {}區塊中加入以下程式碼:


        config.language = 'zh';

 

(2)修改.aspx.cs(.aspx.vb)檔:


        protected void CKEditorControl1_PreRender(object sender, EventArgs e)
        {
            CKEditorControl1.Language = "zh";
        }

        Protected Sub CKEditorControl1_PreRender(sender As Object, e As EventArgs) Handles CKEditorControl1.PreRender
           CKEditorControl1.Language = "zh"
        End Sub

 

2. 可使用的項目:根據預設所有的項目都可以使用(Full)。

(1) 修改ckeditor\config.js:

在CKEDITOR.editorConfig = function (config) {}區塊中加入以下程式碼:


         config.toolbar = [['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
		['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFor​​mat'],
		['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
		'/',
		['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
		['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink'],
		['Image', 'Table', 'Horizo​​ntalRule', 'SpecialChar'], 
		'/',
		['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize','-','About']];

其中, [] 代表群組, '-'代表分割線, '/'代表換行, ''括住項目名稱

 

(2)修改.aspx.cs(.aspx.vb)檔:


        protected void CKEditorControl1_PreRender(object sender, EventArgs e)
        {
            CKEditorControl1.Toolbar = @"Cut|Copy|Paste|PasteText|PasteFromWord" + Environment.NewLine+
                "Undo|Redo|-|Find|Replace|-|SelectAll|RemoveFormat" + Environment.NewLine+
                "NumberedList|BulletedList|-|Outdent|Indent" + Environment.NewLine+
                "/" + Environment.NewLine+
                "Bold|Italic|Underline|Strike|-|Subscript|Superscript" + Environment.NewLine+
                "JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock" + Environment.NewLine+
                "Link|Unlink" + Environment.NewLine+
                "Image|Table|HorizontalRule|SpecialChar" + Environment.NewLine+
                "/" + Environment.NewLine+
                "Styles|Format|Font|FontSize" + Environment.NewLine+
                "TextColor|BGColor" + Environment.NewLine+
                "Maximize|-|About";
        }

        Protected Sub CKEditorControl1_PreRender(sender As Object, e As EventArgs) Handles CKEditorControl1.PreRender
        	CKEditorControl1.Toolbar = "Cut|Copy|Paste|PasteText|PasteFromWord" + Environment.NewLine +
        	    "Undo|Redo|-|Find|Replace|-|SelectAll|RemoveFormat" + Environment.NewLine +
        	    "NumberedList|BulletedList|-|Outdent|Indent" + Environment.NewLine + "/" + Environment.NewLine +
        	    "Bold|Italic|Underline|Strike|-|Subscript|Superscript" + Environment.NewLine +
        	    "JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock" + Environment.NewLine +
        	    "Link|Unlink" + Environment.NewLine + "Image|Table|HorizontalRule|SpecialChar" + Environment.NewLine + "/" + Environment.NewLine +
        	    "Styles|Format|Font|FontSize" + Environment.NewLine + "TextColor|BGColor" + Environment.NewLine + "Maximize|-|About"
         End Sub

其中,Environment.NewLine 代表群組, '-'代表分割線, '/'代表換行,'|'分割項目名稱

       需注意:項目名稱有大小寫之分。

3. UI底色:根據預設為Color.LightGray (0xB3B3B3)

(1) 修改ckeditor\config.js:

在CKEDITOR.editorConfig = function (config) {}區塊中加入以下程式碼:


         cconfig.uiColor = '#AADC6E';

 

(2)修改.aspx.cs(.aspx.vb)檔:


        protected void CKEditorControl1_PreRender(object sender, EventArgs e)
        {
            CKEditorControl1.UIColor =  System.Drawing.Color.FromArgb(0xAA,0xDC,0x6E);
	}

        Protected Sub CKEditorControl1_PreRender(sender As Object, e As EventArgs) Handles CKEditorControl1.PreRender
        	CKEditorControl1.UIColor =  System.Drawing.Color.FromArgb(&HAA,&HDC,&H6E)
         End Sub

4.UI樣式:根據預設為kama。目前可選擇kama, office2003, v2三種。

(1) 修改ckeditor\config.js:

在CKEDITOR.editorConfig = function (config) {}區塊中加入以下程式碼:


         cconfig.skin = 'office2003';

 

(2)修改.aspx.cs(.aspx.vb)檔:


        protected void CKEditorControl1_PreRender(object sender, EventArgs e)
        {
            CKEditorControl1.Skin =  "office2003";
	}

        Protected Sub CKEditorControl1_PreRender(sender As Object, e As EventArgs) Handles CKEditorControl1.PreRender
        	CKEditorControl1.Skin =  "office2003"
         End Sub

       需注意:樣式名稱有大小寫之分。若選擇office2003或v2則無法變更UI底色。v2即為FCKEditor樣式。