一、建立一個基本的web專案來說明基本設定
本文使用jsp web專案
Server: Tomcat 6
使用Eclipse來編輯專案
二、CKEditor相關檔
1、複製相關資料檔
解壓後ckeditor_4.5.7_full.zip
圖1 得到ckeditor 複製到你的web專案下。
複製到\webapp\ckeditor_4.5.7
三、說明檔及範例檔
因為本文沒用到。
CHANGES.md
LICENSE.md
README.md
samples\* :範例檔
以上四個資料可以在web專案裡移除。
(保留原壓縮檔，後面說明還會用到samples資料夾)
web專案留下的資料有：
adapters\jquery.js :CKEditor需要用到jquery
lang\zh.js :顯示文字檔
plugins\* :套件相關資料檔
skins\* :樣式資料檔
build-config.js :建置設定檔
ckeditor.js :CKEditor 主要js檔
config.js :CKEditor 主要的配置文件檔
contents.css :基本css
styles.js :基本預設樣式js檔
圖2
四、設定CKEditor 設定檔
config.js
圖3 原檔內容，都沒有設定。
1、設定使用語言
config.language = 'zh';
2、設定ui顏色
config.uiColor = '#AADC6E';
3、設定高度及寬度
config.height = 300;
config.width = 800;
4、設定功能鈕
config.toolbarCanCollapse = true;
圖 4
五、功能鈕
可以改你想要顯示那些功能鈕
在samples\資料夾裡，有個設定功能鈕頁。
samples\toolbarconfigurator\index.html
圖5
圖6
圖7 轉換設定config
將config.toolbar = [...內容
貼到config.js
六、首頁
1、設定相關js及css
<script src="js/jquery.min.1.11.1.js"></script> <script src="ckeditor_4.5.7/ckeditor.js"></script> <link rel="stylesheet" href="ckeditor_4.5.7/contents.css">
2、啟用CKEditor
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.replace('content');
console.log("ready!");
});
</script>
3、作用區塊
<form id="detaform" method="post"> <textarea id="content" name="content"></textarea> </form>
4、index.html內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="js/jquery.min.1.11.1.js"></script>
<script src="ckeditor_4.5.7/ckeditor.js"></script>
<link rel="stylesheet" href="ckeditor_4.5.7/contents.css">
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.replace('content');
console.log("ready!");
});
</script>
</head>
<body>
<form id="detaform" method="post">
<textarea id="content" name="content"></textarea>
</form>
</body>
</html>
圖8
七、測試
1、進專案資料夾下，index.html 點二下
2、啟動ckeditor 編輯器
下一篇：
CKEditor skins 變換
其它文章
沒有留言:
張貼留言