CKEditor 簡介
CKEditor 是一款功能強大的開源在線文本編輯器。它所見即所得的特點，使你在編輯時所看到的內容和格式，能夠與發布後看到的效果完全一致。CKEditor 完全是基於 JavaScript 開發的，因此不必在客戶端進行任何安裝，並且兼容各大主流瀏覽器。CKEditor 的前身是 FCKEditor，目前，有很多公司都在使用 CKEditor 作为 Web 編輯的解决方案。
從CKEditor的官方網站(http://ckeditor.com/download) 下載的開發包解壓
CKEditor 的基本使用
<script type=”text/javascript” src=”js/ckeditor/ckeditor.js”></script>
<textarea id=”editor1″ class=”ckeditor”>Sample Text</textarea>
此種創建方法的優點：簡單！ 缺點：不容易靈活設置Ckeditor的皮膚、工具欄甚至初始化時的動作事件；補救辦法：通過Ckeditor根目錄下的config.js去設置（适用於整個網站只調用同一種皮膚、工具欄的Ckeditor）
除了令 CKEditor 自動進行 <textarea>元素的替換外，我們也可以使用 JavaScript 代碼讓 CKEditor 替換特定的 <div> 以及 <textarea> 元素
<html>
<head>
<script type=”text/javascript” src=”js/ckeditor/ckeditor.js”></script>
<script type=”text/javascript”>
<!–
functiononLoad(){
CKEDITOR.replace(“editor2”);
}
//–>
</script>
</head>
<body onload=”returnonLoad(); “>
<div id=”editor2”><strong>Sample</strong> Text</div>
</body>
</html>
CKEDITOR.replace(“editor2″);
CKEditor會在<body>元素中先按name來查找<div>元素或<textarea>元素为”editor2″，查找不到，再按 id 來查找。
在通常的 CKEditor 應用中，用CKEDITOR.replace()傳遞更多的参數，來定制我們需要的編輯器。
如：
<html>
<head>
<script type=”text/javascript” src=”js/ckeditor/ckeditor.js”></script>
<script type=”text/javascript”>
<!–
functiononLoad() {
CKEDITOR.replace(“editor2″, {
toolbar: [
[‘Bold’,’Italic’,’Underline’,’Strike’], [‘Cut’,’Copy’,’Paste’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’]
]
});
}
// –>
</script>
</head>
<body onload=”returnonLoad();”>
<div id=”editor2″>Sample text</textarea>
</body>
</html>
CKEditor菜單欄配置可以参見其官網上的文：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar。
設置編輯器皮膚、寬高
<textarea cols=”90″ rows=”10″ id=”content” name=”content”>ckeditor</textarea>
<script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
<script type=”text/javascript”>
<!–
CKEDITOR.replace(“content”,
{
skin: “kama”, width:700, height:300
});
//–>
</script>
設置值
CKEDITOR.instances.content.setData(“test”); // content 就是前面 CKEDITOR.replace 的第一個参數值
或var editor = CKEDITOR.replace(“content”);
editor.setData(“test”);
取值
alert(CKEDITOR.instances.content.getData() );// content 就是前面 CKEDITOR.replace 的第一個参數值
或var editor = CKEDITOR.replace(“content”);
alert(editor.getData());
插入圖片
若要演示此示例，最好是放在按鈕的事件處理程序中，目的是有些延遲。
CKEDITOR.instances.content.insertHtml(“<img src=…>”);
配置編輯器
ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参數：
config.language = ‘zh-cn’;// 界面語言，默認为 ‘en’
config.width = 400; // 設置寬高
config.height = 400;// 設置高度
config.skin = ‘v2′;// 編輯器样式，有三種：’kama’（默認）、’office2003’、’v2’
config.uiColor = ‘#FFF’; // 背景顏色
Ckeditor工具欄自定義設置
// 工具欄（基礎’Basic’、全能’Full’、自定義）plugins/toolbar/plugin.js
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’],
[‘Maximize’, ‘ShowBlocks’,’-‘,’About’]
];
config.toolbar_Basic =
[
[‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’,’-‘,’About’]
];
上述代碼中第一行，即为設定默認工具欄的，可以改寫为：config.toolbar = ‘Basic’;
也可以用js代碼調用Ckeditor時設置：
CKEDITOR.replace( ‘editor1’,
{
toolbar :
[
[‘Styles’, ‘Format’],
[‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘-‘, ‘About’]
]
});
以上兩種方法的綜合
CKEDITOR.replace( ‘editor1’,
{
toolbar : ‘Full’
});
CKEDITOR.replace( ‘editor2’,
{
toolbar : ‘Basic’
);
config.toolbarCanCollapse = true;//工具欄是否可以被收縮
config.toolbarLocation = ‘top’;//可選：bottom//工具欄的位置
config.toolbarStartupExpanded = true;//工具欄默認是否展開
config.resize_enabled = false;// 取消 “拖拽以改變尺寸”功能 plugins/resize/plugin.js
config.autoUpdateElement = true;// 當提交包含有此編輯器的表單時，是否自動更新元素內的數據
config.resize_maxHeight = 3000;//改變大小的最大高度
config.resize_maxWidth = 3000;//改變大小的最大寬度
config.resize_minHeight = 250;//改變大小的最小高度
config.resize_minWidth = 750;//改變大小的最小寬度
//設置快捷鍵
config.keystrokes = [
[ 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_foreStyle = {
element : ‘span’,
styles : { ‘color’ : ‘#(color)’ }
};
Ckeditor語言、字體及皮膚样式自定義
Ckeditor支持多國語言，並提供三種皮膚样式：kama、office2003和v2 ，可以在Ckeditor根目錄下的config.js文件中進行設置：
config.language = ‘zh-cn’ ;
config.skin = ‘office2003’;
也可以在js調用Ckeditor時設置：
CKEDITOR.replace( ‘editor1’,{
toolbar : ‘Full’,
language : ‘zh-cn’,
skin : ‘office2003’
});
config.contentsCss = ‘./contents.css’;//所需要添加的CSS文件 在此添加 可使用相對路徑和網站的絕對路徑
config.enterMode = CKEDITOR.ENTER_P; //回車產生的標簽,可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
config.font_defaultLabel = ‘Arial’;//默認的字體名 plugins/font/plugin.js
Ckeditor添加中文字體
在Ckeditor根目錄下的config.js文件中添加：
config.font_names = ‘宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS’;
在用js代碼調用Ckeditor時添加：
CKEDITOR.replace( ‘editor1’, {
toolbar : ‘Full’,
language : ‘zh-cn’,
skin : ‘office2003’,
config.font_names : ‘宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS’
});
一些使用技巧
1、在頁面中即時設置編輯器
<script type=”text/javascript”>
//示例1：設置工具欄为基本工具欄，高度为70
CKEDITOR.replace(‘<%=tbLink.ClientID.Replace(“_”,”$”) %>’,
{ toolbar:’Basic’, height:70 });
//示例2：工具欄为自定義類型
CKEDITOR.replace( ‘editor1’,
{
toolbar :
[
//加粗 斜體，下劃線 穿過線 下標字 上標字
[‘Bold’,’Italic’,’Underline’,’Strike’,’Subscript’,’Superscript’],
//數字列表 實體列表 減小縮進 增大縮進
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’],
//左對齊 居中對齊 右對齊 兩端對齊
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’],
//超鏈接 取消超鏈接 錨點
[‘Link’,’Unlink’,’Anchor’],
//圖片 flash 表格 水平線 表情 特殊字符 分頁符
[‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],
‘/’,
//样式 格式 字體 字體大小
[‘Styles’,’Format’,’Font’,’FontSize’],
//文本顏色 背景顏色
[‘TextColor’,’BGColor’],
//全屏 顯示區塊
[‘Maximize’, ‘ShowBlocks’,’-‘]
]
}
);
</script>
精簡ckeditor
在部署到Web服務器上時，下列文件夾和文件都可以刪除：
/_samples ：示例文件夾；
/_source ：未壓縮源程序；
/lang文件夾下除 zh-cn.js、en.js 以外的文件（也可以根據需要保留其他語言文件）；
根目錄下的 changes.html(更新列表)，install.html(安裝指向)，license.html(使用許可)；
/skins 目錄下不需要的皮膚，一般用V2(簡單，樸素) ，如果只保留V2則必須在config.js中指定皮膚。