CKEditor 3.0安裝配置,感覺比較簡單,但本次沒有涉及上傳文件的配置,下篇文章將寫一下如何將CKEditor的兄弟產(chǎn)品:ckfinder 功能強(qiáng)大的上傳文件管理器整合進(jìn) CKEditor3.0
下載CKEditor 3.0,地址:http://ckeditor.com/
首先,下載下來解壓后,把文件夾ckeditor放到你的站點(diǎn)。
其次,在你的網(wǎng)頁里面加入下面腳本:
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
注意紅色部分,這里根據(jù)你自己的編輯器路徑修改,請務(wù)必配置正確。
再次,在需要引用CKEditor編輯器的地方加入下面代碼:
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
這里是內(nèi)容
</textarea>
如果你是ASP.NET開發(fā)人員 可以寫成:
<textarea class="ckeditor" id="txtContent" runat="server" name="txtContent"></textarea>
或者:
<textarea cols="80" id="editor1" name="editor1" rows="10">
這里是內(nèi)容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
這樣,一個(gè)編輯器就基本可以使用了。
--------------------------------------------------
配置屬于自己的編輯器,配置Config.js文件(官方給出配置的幾種方法,詳見參考官方文檔)如下:
http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html#.autoUpdateElement
用記事本打開config.js文件,可看到下面代碼:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置語言
//config.uiColor = '#FFF'; //背景顏色
//config.width = 500; //寬度
config.height = 400; //高度
config.skin='v2';
//工具欄
config.toolbar =
[
['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','-','Source','-','Undo','Redo']
];
};
為了減少編輯器的大小,可以刪除一些不必要的文件,如把_samples、_source、_tests三個(gè)文件夾刪除,進(jìn)入lang文件目錄,保留en.js、zh.js、zh-cn.js三個(gè)文件,其余的語言文件如果你用不到,可以刪除。
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答!! 點(diǎn)擊進(jìn)入論壇