pass Ckeditor value to div text without html tags?

Question

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.

AlfonsoML · Accepted Answer · 2012-04-29 09:49:25Z

4

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

answered Apr 29, 2012 at 9:49

AlfonsoML

12.7k2 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AliRıza Adıyahşi Over a year ago

Great answer. I deal 2 days to do this. I did it. I wish I asked 2 days ago. Thanks

Collectives™ on Stack Overflow

pass Ckeditor value to div text without html tags?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related