本文說明預覽(Preview)文件功能事件
一、前題查看是否有預覽(Preview)的套件
下載 預覽(Preview)的套件
http://ckeditor.com/addon/preview
如何安裝套件這裡不多說，在另一篇有說明。
請參考：
CKEditor plugins 增加套件
二、說明文件
contentPreview Event官網說明文件
三、程式
主要程式：
editor.on('contentPreview', function(evt) {
console.log(evt.data.dataValue);
console.log("contentPreview");
});
程式檔：index4.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('contentPreview', function(evt) {
console.log(evt.data.dataValue);
console.log("contentPreview");
});
editor.on('blur', function(evt) {
console.log("blur");
});
editor.on('focus', function(evt) {
console.log("focus");
});
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
其它文章
沒有留言:
張貼留言