尝试在不同 DIV 中的同一视图上显示 CK 编辑器的内容

Question

我使用在线资源创建了以下 CK 编辑器

<div class="section">
  <div class="container">

    <h2>CK EDITOR CONSOLE</h2>

    @Html.TextArea("Explanation")

    <script type="text/javascript" src="@Url.Content("~/ckfinder/ckfinder.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>

    <script type="text/javascript">
      var editor = CKEDITOR.instances['editor1'];
      if (editor) { editor.destroy(true); }
      CKEDITOR.replace('Explanation', {
        enterMode: CKEDITOR.ENTER_BR,
      });
      CKFinder.setupCKEditor(null, '@Url.Content("~/ckfinder/")');
    </script>

    <form method="post" action="">
        @Html.TextAreaFor(x => x.Text, new { id = "Explanation" })
        <p><input type="submit" value="Submit" /></p>
    </form>
  </div>

</div>

现在我想将我输入的内容（文本/图像）显示在同一视图上的单独区域中单击提交按钮。

有人可以帮忙吗？

Answer 1

在预览所在的位置添加一个空 div：

<div id="explanation-preview"></div>

添加一个按钮生成预览，即不提交表单，例如：

<button type="button" id="preview">Click me to preview!</button>

在 jquery 中，声明您的 ckeditor 后，捕获按钮单击并将内容从编辑器传递到 div：

<script type="text/javascript">
    var editor = CKEDITOR.instances['editor1'];

    // ...

    $('#preview').on('click', function() {
        $('#explanation-preview').html(editor.getData());
    });
</script>