CKEditor Preview Method
I would like to have a button elsewhere on my page that runs the same method that clicking the "Preview" button does in the CKEditor toolbar. I'm using jqu开发者_如何学Cery so it would be something like this:
$('#previewButton').click( function () {
$('#editor1').ckEditorGet().Preview();
});
Any ideas how I could accomplish this? I pored over the API documentation but can't find a word on it.
Cheers
Alternatively you can get the editor contents with $('#editor1').val(), and display it the way you prefer. This example uses a popup window:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#previewButton').click( function () {
var contents = $('#editor1').val();
var mywin = window.open("", "ckeditor_preview", "location=0,status=0,scrollbars=0,width=500,height=500");
$(mywin.document.body).html(contents);
});
$('#editor1').ckeditor();
});
</script>
<textarea id="editor1" cols="5" rows="5">
Contents...
</textarea>
<button id="previewButton">Preview</button>
Using Firebug or other development tool navigate to the "Preview" button in the CKEditor. There you'll find function on the click event like:
CKEDITOR.tools.callFunction(6, this); return false;
You can use it to open a preview window. You can do smth. like:
<html><a ... onclick="openPreview(this); return false;"></a></html>
<script>function openPreview(ar_obj){ CKEDITOR.tools.callFunction(6, ar_obj); }</script>
At first glance you could do something like this
$('[title="Preview"]').click();
Select the anchor with title=preview and invoke click.
加载中,请稍侯......
精彩评论