instanceReady 事件說明：
在創建CKEDITOR實例時觸發的事件，完全初始化並準備互動。
本文使用instanceReady 事件，
實作CKEDITOR初始化後，將CKEditor 編輯器最大化 (maximize)
一、本文測試專案，前題參考：
如有相關設定已在上序二篇有說明時，本文不在說明。
二、程式一
主要修改，加入on綁定事件
var editor = CKEDITOR.replace('content', {
on : {
'instanceReady' : function(evt) {
evt.editor.execCommand('maximize');
}
}
});
程式：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 src="ckfinder/ckfinder.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var editor = CKEDITOR.replace('content', {
on : {
'instanceReady' : function(evt) {
evt.editor.execCommand('maximize');
}
}
});
CKFinder.setupCKEditor(editor, 'ckfinder/');
console.log("ready!");
});
</script>
</head>
<body>
<h2>Hello World!</h2>
<form id="detaform" method="post">
<textarea id="content" name="content"></textarea>
</form>
</body>
</html>
測試：
圖2
三、程式二
主要修改，加入on綁定事件
var editor = CKEDITOR.replace('content');
editor.on('instanceReady', function(evt) {
console.log("instanceReady");
evt.editor.execCommand('maximize');
});
程式：index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 src="ckfinder/ckfinder.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var editor = CKEDITOR.replace('content');
CKFinder.setupCKEditor(editor, 'ckfinder/');
editor.on('instanceReady', function(evt) {
console.log("instanceReady");
evt.editor.execCommand('maximize');
});
console.log("ready!");
});
</script>
</head>
<body>
<h2>Hello World!</h2>
<form id="detaform" method="post">
<textarea id="content" name="content"></textarea>
</form>
</body>
</html>
測試：
圖3
下載專案 CKEditorTestE
本文測試專案
在下一篇可下載：
CKEditor change blur focus Event
其它文章
沒有留言:
張貼留言