CKEditor 预览方法答案

【问题标题】：CKEditor Preview MethodCKEditor 预览方法
【发布时间】：2010-12-09 18:21:21
【问题描述】：

我想在我的页面的其他地方有一个按钮，该按钮运行的方法与单击 CKEditor 工具栏中的“预览”按钮所执行的方法相同。我正在使用 jquery，所以它会是这样的：

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

有什么想法可以做到这一点吗？我仔细研究了 API 文档，但找不到任何相关信息。

干杯

【问题讨论】：

标签： jquery ckeditor preview

【解决方案1】：

您也可以使用$('#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>

【讨论】：

有趣的想法...有机会我会尝试一下。我唯一的评论是，我认为您不能使用 .val() 方法访问 CKEditor 的 HTML。你需要这样做，$("#editor1").ckEditorGet().getData()。
我最终使用了这个解决方案，因为它给了我更多的控制权。我确实在 .click 函数中添加了几行代码。即：mywin.focus() 并返回 false;。这使新窗口在打开时保持焦点。
@MikeMurko .val() 方法是 jQuery 适配器中的专用方法，所以它是这样工作的（参见博客 CKEditor for jQuery）。

【解决方案2】：

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

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

您可以使用它来打开预览窗口。你可以做某事。喜欢：

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

【讨论】：

【解决方案3】：

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

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

选择anchor 和title=preview 并调用click。

【讨论】：

魔法，成功了！我还将研究 styu 的方法，因为我正在考虑对在新窗口上预览的内容进行操作，而他的方法允许我这样做。感谢您的帮助！