CKEditor预览方法

问题描述 投票:1回答:3

我希望在我的页面上的其他位置有一个按钮,其运行方法与单击CKEditor工具栏中的“预览”按钮相同。我正在使用jquery所以它会是这样的:

$('#previewButton').click( function () { 
$('#editor1').ckEditorGet().Preview(); 
});

任何想法我怎么能做到这一点?我对API文档进行了仔细研究,但无法找到相关内容。

干杯

jquery ckeditor preview
3个回答
2
投票

或者,您可以使用$('#editor1').val()获取编辑器内容,并以您喜欢的方式显示它。此示例使用弹出窗口:

<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>

1
投票

使用Firebug或其他开发工具导航到CKEditor中的“预览”按钮。在那里你会找到点击事件的功能,如:

CKEDITOR.tools.callFunction(6, this); return false;

您可以使用它来打开预览窗口。你可以做smth。喜欢:

<html><a ... onclick="openPreview(this); return false;"></a></html>
<script>function openPreview(ar_obj){ CKEDITOR.tools.callFunction(6, ar_obj); }</script>

0
投票

乍一看,你可以做这样的事情

$('[title="Preview"]').click();

anchor选择title=preview并调用click。

© www.soinside.com 2019 - 2024. All rights reserved.