Search code examples
javascriptckeditor

CKEDITOR - <p> instead of <br/> causing copy-paste issues

Some time ago I changed the CKEDITOR to not use <br> tag and use <p> instead. This makes things alot easier for me.

But today I spotted a problem here... When I paste into ckeditor this text:

Text

More text

CKEDITOR makes this: <p>Text</p><p>More text</p>. How can I configure ckeditor so that it will put put only single <p> tag over whole text, and inside it will put <br/>'s?

Solution

  • There's no configuration option for pasting itself. You can, however, change behaviour of entire CKEditor if you set config.enterMode to CKEDITOR.ENTER_BR. Then CKEditor will not use paragraphs at all. On the other hand, it's not recommended to use other enter modes, because the default (CKEDITOR.ENTER_P) is the most correct, semantic and best supported.

    Although, if you must change the paste behaviour, there's one more way. You can listen to editor#paste event and transform content in your preferred way. Very rough implementation would look like this:

    editor.on( 'paste', function( evt ) {
    var data = evt.data.dataValue;
    data = data
        .replace( /^<p>/, '' )
        .replace( /<\/p>$/, '' )
        .replace( /<\/p><p>/g, '<br />' );
    evt.data.dataValue = data;
} );