如何在Linux下使用網頁編輯器CKEditor

　　CKEditor通常所指的就是fCKEDITOR，是優秀的網頁編輯器，能夠支持多種編程語言，使用的人越來越多，那麼Linux下要如何使用網頁編輯器CKEditor呢？下面小編就給大家介紹下Linux使用CKEditor的方法。

　　一、使用方法：

　　1、在頁面《head》中引入ckeditor核心文件ckeditor.js

　　《script type=“text/javascript” src=“ckeditor/ckeditor.js”》《/script》

　　2、在使用編輯器的地方插入HTML控件《textarea》

　　《textarea id=“TextArea1” cols=“20” rows=“2” class=“ckeditor”》《/textarea》

　　如果是ASP.NET環境，也可用服務器端控件《TextBox》

　　《asp:TextBox ID=“tbContent” runat=“server” TextMode=“MultiLine” class=“ckeditor”》《/asp:TextBox》

　　注意在控件中加上 class=“ckeditor” 。

　　3、將相應的控件替換成編輯器代碼

　　《script type=“text/javascript”》

　　CKEDITOR.replace（‘TextArea1’）;

　　//如果是在ASP.NET環境下用的服務器端控件《TextBox》

　　CKEDITOR.replace（‘tbContent’）;

　　//如果《TextBox》控件在母版頁中，要這樣寫

　　CKEDITOR.replace（‘《%=tbContent.ClientID.Replace（“_”，“$”） %》’）;

　　《/script》

　　4、配置編輯器

　　ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置參數：

　　// 界面語言，默認為 ‘en’

　　config.language = ‘zh-cn’;

　　// 設置寬高

　　config.width = 400;

　　config.height = 400;

　　// 編輯器樣式，有三種：‘kama’（默認）、‘office2003’、‘v2’

　　config.skin = ‘v2’;

　　// 背景顏色

　　config.uiColor = ‘#FFF’;

　　// 工具欄（基礎‘Basic’、全能‘Full’、自定義）plugins/toolbar/plugin.js

　　config.toolbar = ‘Basic’;

　　config.toolbar = ‘Full’;

　　這將配合：

　　config.toolbar_Full = ［

　　［‘Source’，‘-’，‘Save’，‘NewPage’，‘Preview’，‘-’，‘Templates’］，

　　［‘Cut’，‘Copy’，‘Paste’，‘PasteText’，‘PasteFromWord’，‘-’，‘Print’， ‘SpellChecker’， ‘Scayt’］，

　　［‘Undo’，‘Redo’，‘-’，‘Find’，‘Replace’，‘-’，‘SelectAll’，‘RemoveFormat’］，

　　［‘Form’， ‘Checkbox’， ‘Radio’， ‘TextField’， ‘Textarea’， ‘Select’， ‘Button’， ‘ImageButton’， ‘HiddenField’］，

　　‘/’，

　　［‘Bold’，‘Italic’，‘Underline’，‘Strike’，‘-’，‘Subscript’，‘Superscript’］，

　　［‘NumberedList’，‘BulletedList’，‘-’，‘Outdent’，‘Indent’，‘Blockquote’］，

　　［‘JustifyLeft’，‘JustifyCenter’，‘JustifyRight’，‘JustifyBlock’］，

　　［‘Link’，‘Unlink’，‘Anchor’］，

　　［‘Image’，‘Flash’，‘Table’，‘HorizontalRule’，‘Smiley’，‘SpecialChar’，‘PageBreak’］，

　　‘/’，

　　［‘Styles’，‘Format’，‘Font’，‘FontSize’］，

　　［‘TextColor’，‘BGColor’］

　　］;

　　//工具欄是否可以被收縮

　　config.toolbarCanCollapse = true;

　　//工具欄的位置

　　config.toolbarLocation = ‘top’;//可選：bottom

　　//工具欄默認是否展開

　　config.toolbarStartupExpanded = true;

　　// 取消 “拖拽以改變尺寸”功能 plugins/resize/plugin.js

　　config.resize_enabled = false;

　　//改變大小的最大高度

　　config.resize_maxHeight = 3000;

　　//改變大小的最大寬度

　　config.resize_maxWidth = 3000;

　　//改變大小的最小高度

　　config.resize_minHeight = 250;

　　//改變大小的最小寬度

　　config.resize_minWidth = 750;

　　// 當提交包含有此編輯器的表單時，是否自動更新元素內的數據

　　config.autoUpdateElement = true;

　　// 設置是使用絕對目錄還是相對目錄，為空為相對目錄

　　config.baseHref = ‘’

　　// 編輯器的z-index值

　　config.baseFloatZIndex = 10000;

　　//設置快捷鍵

上一頁1234下一頁共4頁

　　config.keystrokes = ［

　　［ CKEDITOR.ALT + 121 /*F10*/， ‘toolbarFocus’ ］， //獲取焦點

　　［ CKEDITOR.ALT + 122 /*F11*/， ‘elementsPathFocus’ ］， //元素焦點

　　［ CKEDITOR.SHIFT + 121 /*F10*/， ‘contextMenu’ ］， //文本菜單

　　［ CKEDITOR.CTRL + 90 /*Z*/， ‘undo’ ］， //撤銷

　　［ CKEDITOR.CTRL + 89 /*Y*/， ‘redo’ ］， //重做

　　［ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/， ‘redo’ ］， //

　　［ CKEDITOR.CTRL + 76 /*L*/， ‘link’ ］， //鏈接

　　［ CKEDITOR.CTRL + 66 /*B*/， ‘bold’ ］， //粗體

　　［ CKEDITOR.CTRL + 73 /*I*/， ‘italic’ ］， //斜體

　　［ CKEDITOR.CTRL + 85 /*U*/， ‘underline’ ］， //下劃線

　　［ CKEDITOR.ALT + 109 /*-*/， ‘toolbarCollapse’ ］

　　］

　　//設置快捷鍵 可能與浏覽器快捷鍵沖突 plugins/keystrokes/plugin.js.

　　config.blockedKeystrokes = ［

　　CKEDITOR.CTRL + 66 /*B*/，

　　CKEDITOR.CTRL + 73 /*I*/，

　　CKEDITOR.CTRL + 85 /*U*/

　　］

　　//設置編輯內元素的背景色的取值 plugins/colorbutton/plugin.js.

　　config.colorButton_backStyle = {

　　element ： ‘span’，

　　styles ： { ‘background-color’ ： ‘#（color）’ }

　　}

　　//設置前景色的取值 plugins/colorbutton/plugin.js

　　config.colorButton_colors = ‘000，800000，8B4513，2F4F4F，008080，000080，4B0082，696969，B22222，A52A2A，DAA520，

　　006400，40E0D0，0000CD，800080，808080，F00，FF8C00，FFD700，008000，0FF，00F，EE82EE，

　　A9A9A9，FFA07A，FFA500，FFFF00，00FF00，AFEEEE，ADD8E6，DDA0DD，D3D3D3，FFF0F5，

　　FAEBD7，FFFFE0，F0FFF0，F0FFFF，F0F8FF，E6E6FA，FFF’

　　//是否在選擇顏色時顯示“其它顏色”選項 plugins/colorbutton/plugin.js

　　config.colorButton_enableMore = false

　　//區塊的前景色默認值設置 plugins/colorbutton/plugin.js

　　config.colorButton_foreStyle = {

　　element ： ’span‘，

　　styles ： { ’color‘ ： ’#（color）‘ }

　　};

　　//所需要添加的CSS文件 在此添加 可使用相對路徑和網站的絕對路徑

　　config.contentsCss = ’。/contents.css