2011-03-07 21:42
浏览 51

ck编辑器 - 服务器预览?

How would I go about getting ckeditor's preview button to send the content to the server so I can show it in a custom page when preview is clicked?

图片转代码服务由CSDN问答提供 功能建议

如何获取ckeditor的预览按钮将内容发送到服务器,以便我可以在自定义中显示 单击预览时的页面?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongwen9947 2011-09-04 00:24

    We're doing something like this except that we have a preview link on the page that loads the editor. The approach could be used for a button within the editor, but it requires additional coding (I'll outline that approach at the bottom).

    The preview link looks something like this:

    <a href="#" onclick="return doPreview();">Preview the page</a>

    We have the doPreview function:

    function doPreview() {
    var hiddenForm = document.forms[ 'hidden_form' ];
    // TextareaId is the id of the textarea being replaced with CKEditor (the instance name)
    hiddenForm.elements[ 'preview_content' ].value = CKEDITOR.instances.TextareaId.getData();
    // "myform" is the active form that contains the textarea replaced by CKEditor.
    var liveForm = document.forms[ 'myform' ];
    if ( ! liveForm ) {
      alert( 'Error finding "myform" form.' );
      return false;
    return true;


    Finally, there's a form with hidden fields (hiddenForm):

    <form name="hiddenForm" action="HTTP://www.yoursite.com/preview_template" method="POST" target="_blank">
      <input type="hidden" name="preview_content" value="" />

    So, the link is clicked and the doPreview function is called.
    The function grabs the content from CKEditor and assigns it to a hidden field in the hidden form.
    Then the function submits the hidden form.
    The hidden form is posted and the preview template is loaded in a new window.
    The content area of the preview template is populated with $_POST['preview_content'] (the content data from the editor).

    You can modify to contain any variables you need to post.

    To do this by clicking a button within CKEditor:
    You could create a custom plugin. There's a tutorial section with easy instructions for creating a plugin here:

    The plugin could work with a hidden form on the main page again, you'll need to call the parent window from your plugin function.

    Or, you could compose the form with JavaScript within your plugin and submit it from there.

    Note: You can disable the default preview functionality using this setting:

    config.removePlugins = 'preview';

    Be Well, Joe

    打赏 评论
  • douyou7878 2011-09-08 15:35

    You can get a plugin ready to work here: http://alfonsoml.blogspot.com/2011/08/serverpreview-plugin-for-ckeditor.html

    You just have to configure the page that you want to use for the preview and it will replace the default Preview button. Additional options are explained in the included documentation.

    打赏 评论

相关推荐 更多相似问题