本文說明CKEditor plugins 套件。
在CKEditor的功能，都是套件化。
一、功能
圖1 本文用表格功能來說明增加套件
二、表格功能
圖2
三、進入CKEditor 官網，增加套件
Add-ons -> Plugins
http://ckeditor.com/addons/plugins/all
圖3
四、選Quicktable查件
http://ckeditor.com/addon/quicktable
圖4
五、下載
Version: 1.0.6
圖5
圖6 記下config
config.extraPlugins = 'quicktable';
六、解壓檔
本文下載 quicktable_1.0.6.zip
圖7
圖8 改資料夾為quicktable
七、配置
將quicktable資料夾，複製到web專案下ckeditor_4.5.7/plugins/下
圖9
八、設定
在config.js 裡新增
config.extraPlugins = 'quicktable';
圖10
九、執行成果
圖11
圖12
十、加入quicktable配置
圖13
quicktable配置，如果不設定，會自動使幅預設的設定。
CKEDITOR.replace( 'content', {
qtRows: 20, // Count of rows
qtColumns: 20, // Count of columns
qtBorder: '1', // Border of inserted table
qtWidth: '90%', // Width of inserted table
qtStyle: { 'border-collapse' : 'collapse' },
qtClass: 'test', // Class of table
qtCellPadding: '0', // Cell padding table
qtCellSpacing: '0', // Cell spacing table
qtPreviewBorder: '4px double black', // preview table border
qtPreviewSize: '4px', // Preview table cell size
qtPreviewBackground: '#c8def4' // preview table background (hover)
});
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() {
console.log("ready!");
CKEDITOR.replace( 'content', {
qtRows: 20, // Count of rows
qtColumns: 20, // Count of columns
qtBorder: '1', // Border of inserted table
qtWidth: '90%', // Width of inserted table
qtStyle: { 'border-collapse' : 'collapse' },
qtClass: 'test', // Class of table
qtCellPadding: '0', // Cell padding table
qtCellSpacing: '0', // Cell spacing table
qtPreviewBorder: '4px double black', // preview table border
qtPreviewSize: '4px', // Preview table cell size
qtPreviewBackground: '#c8def4' // preview table background (hover)
});
});
</script>
</head>
<body>
<form id="detaform" method="post">
<textarea id="content" name="content"></textarea>
</form>
</body>
</html>
圖14
下一篇：
其它文章
沒有留言:
張貼留言