pass Ckeditor value to div text without html tags?

问题

I have Ckeditor in my view and I dynamicly get editor value and show them in divs. I tried many combinaiton of defining(val,html,tex, etc) like this:

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());
        }
      );
    });
});

my divs

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

for exaple When I wrote <pre>int i=0;</pre>

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

I m expecting output: int i=0;

How may I do this.What is the correct syntax?. Thanks.

回答1:

If you skip the jQuery part, you can do it with simple 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;
        }
      );
    });
 });

But using the DOM keyup event might not be enough if you want a good mirror, I suggest you to use the onChange plugin for CKEditor (disclaimer: I wrote it) and now the mirror will update whenever the content changes:

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

来源：https://stackoverflow.com/questions/10368503/pass-ckeditor-value-to-div-text-without-html-tags

标签

asp.net-mvc

ckeditor