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

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>

现在我想在单击“提交”按钮时在同一视图的单独区域中显示我输入的内容 (Text/Images)。

有人可以帮忙吗？

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>

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

Trying to Display Content of CK Editor on Same View in a Different DIV

c#

asp.net-mvc

textarea

views

ckeditor