CODEWITHSUNDEEP
javascripthtmlckeditor
Vitor Villar
Vitor Villar

Reputation: 1925

CKEditor inserting <q> in all <p>

I'm applying a CKEditor in one <textarea> with the follow content: 

<q>
<p>this is paragraph one.</p>
<p>this is paragraph two.</p>
</q>

So, i want quote all those paragraphs. But, when i apply the CKEditor, the HTML above transform in this HTML:

<q>
<p><q>this is paragraph one.</q></p>
<p><q>this is paragraph two.</q></p>
</q>

This is my function to create the CKEditor instance:

function create_ckeditor_instance(comment) {
    comment = '<q>' + comment.trim() + '</q>';

    var html = '<textarea rows="5" cols="80" id="reply-textarea">';
    html += comment;
    html += "</textarea>";

    $('reply-comment-wrapper').html(html);

    CKEDITOR.replace('reply-textarea');

    CKEDITOR.instances['reply-textarea'].on('instanceReady', function (event) {
      var range = CKEDITOR.instances['reply-textarea'].createRange();
      range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );
      CKEDITOR.instances['reply-textarea'].getSelection().selectRanges( [ range ] );
      CKEDITOR.instances['reply-textarea'].focus();
    });

}

My question is, how to avoid this behavior of the CKEditor?

Upvotes: 0

Views: 72

Answers (1)

t.niese
t.niese

Reputation: 40882

The content model of <q> is Phrasing Content, but the <p> element is Flow Content and as of that not a valid child of <q>.

You would need to use <blockquote> instead.

The outer <q></q> looks like a bug to me and but I can't reproduce it here, with the current version with CKEditor.

But that it is transformed to:

<p><q>this is paragraph one.</q></p>
<p><q>this is paragraph two.</q></p>

is correct, because wrapping <q> around those two <p> would produce invalid code.

Upvotes: 4

Related Questions