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>

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

1 个答案: