asp.net-mvc - 将 Ckeditor 值传递给没有 html 标签的 div 文本？

Question

我的视图中有 Ckeditor，我动态获取编辑器值并在 div 中显示它们。我尝试了许多这样的定义组合（val、html、tex 等）：

CKEDITOR.on('instanceCreated', function (e) {
    e.editor.on('contentDom', function () {
        e.editor.document.on('keyup', function (event) {
            var str = CKEDITOR.instances['editor1'].getData();
            $("#mirror1").text(str);
            $("#mirror2").val(str);
            $("#mirror3").html(str);
            $('#mirror4').val($('<div/>').html(str).text());
        }
      );
    });
});

我的 div

<div id="mirror1">
</div>
<div id="mirror2">
</div>
<div id="mirror3">
</div>
<div id="mirror4">
</div>

例如当我写<pre>int i=0;</pre>

mirror1 text= <pre>deneme</pre>
mirror2 text= null
mirror3 text= <pre>int i=0;</pre>
mirror4 text= null

我期待输出：int i=0;

我该怎么做。正确的语法是什么？谢谢。

Answer 1

如果您跳过 jQuery 部分，您可以使用简单的 javascript 来完成：

CKEDITOR.on('instanceCreated', function (e) {
    e.editor.on('contentDom', function () {
        e.editor.document.on('keyup', function (event) {
            var str = CKEDITOR.instances['editor1'].getData();
            document.getElementById("mirror1").innerHTML = str;
        }
      );
    });
 });

但是如果你想要一个好的镜像，使用 DOM keyup 事件可能还不够，我建议你使用CKEditor 的 onChange 插件（免责声明：我写的），现在镜像会在内容发生变化时更新：

CKEDITOR.on('instanceCreated', function (e) {
    var mirror2 = document.getElementById("mirror2");
    e.editor.on('change', function () {
        mirror2.innerHTML = CKEDITOR.instances['editor1'].getData();
    });
});