Prevent attributes from being copied when entering new paragraph?

Question

When creating new paragraphs in CKEditor the attributes (styles, classes) of the previous paragraph get copied onto the new one. Is there a way to prevent this?

For example, if I'm writing in a centered paragraph and press enter to create a new paragraph, my users want the new paragraph to be a simple

without "inheriting" anything from the previous by default.

---

Edit

I managed to get it (dangeriously untested) working with Reinmar's tips. Here is what I wound up with; I hope this helps someone else. If you guys see a glaring error here, please do tell me

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.on('key', function(evt) {
        if (evt.data.keyCode === 13) {
            // if we call getStartElement too soon, we get the wrong element
            setTimeout(function () {
                var se = e.editor.getSelection().getStartElement();
                if(se.getName() == "span") {
                    var text = se.getText(); // Store text, we are about to nuke the spans
                    while (se.getName() == "span") { // possible infinite loop danger
                        se = se.getParent();
                    }
                    if (text.length == 0)
                        se.setHtml(" "); // It's important that this is not empty
                    else
                        se.setHtml(text);
                }
                debug(se.getHtml());
                se.removeAttribute("class");
                se.removeAttribute("mycustomattr");
                se.removeAttribute("myothercustomattr");
                window.bla = se; // useful for debugging
            }, 10);
        }
    });
}); 

Answer 1

I had the similar issue with the upcoming CKEditor v4 (current nightlies). I insert a paragraph with image and custom classes from my custom image browser and CKEditor kept copying the classes to paragraphs created after the image.

I didn't like the idea of key event followed by call of setTimeout, so I examined the source a little bit and it turned out to be really simple.

When you press enter, CKEditor actually issues the enter command. All you need to do, is set an afterCommandExec event and find the newly created empty element:

editor.on('afterCommandExec', function (e) {
    if (e.data.name == 'enter') {
        var el = e.editor.getSelection().getStartElement();

        // when splitting a paragrah before it's first character,
        // the second one is selected
        if (el.getHtml() != '<br>') {
            if (el.hasPrevious() && el.getPrevious().getHtml() == '<br>') {
                el = el.getPrevious();
            } else {
                // both paragraphs are non-empty, do nothing
                return;
            }
        }

        // modify el according to your needs
    }
});

Hope this helps!

Answer 2

I was thinking about your question for last two days and I've got an idea. I checked enter plugin code and it'd better to leave it untouched. Instead you can listen on enter key and after our custom enter is performed you should clear styles from newly created block.

These methods will be useful:

• editor.on( 'key', function( evt ) { evt.data.key... } )
• editor.getSelection().getStartElement() - after enter selection start will be placed in newly created block (+ inline elements like bold, underline, etc).
• CKEDITOR.dtd.* - sets of elements may help you making decision which elements are inline styles and should be removed.
• element.isEmptyInlineRemoveable - you should remove empty inline elements in which cursor was placed.
• editor.createRange().setStartAt( block, 0 ).select() - at the end you should place caret in correct place (at the beginning of block - <p>/<div>/<li>/etc.).

Unfortunately, as you can see, this's not an easy thing to write, so good luck :)