CODEWITHSUNDEEP
javascriptckeditorfckeditor
ghostCoder
ghostCoder

Reputation: 7655

workaround for ckeditor bug nesting divs bug?

Any suggestions or workarounds for this bug?
http://dev.ckeditor.com/ticket/6436
i really need to get around this bug as i need to delete whole divs with one backspace in the editor area in CKEditor. but on insertion the divs get nested due to the bug. So, deletion of individual divs become impossible.

Upvotes: 1

Views: 795

Answers (2)

Perttu
Perttu

Reputation: 171

I encountered this same issue and unfortunately the link to the fix made by ghostCoder isn't available anymore.

In addition to nested divs issue, we have forced paste as plain text (so data is pasted as plain text unless "paste from word" is used) and we are using div as our enterMode. In the pasted data line breaks were replaced with <br /> tags whereas we wanted each line to be wrapper inside element.

This our how I eventually solved the issue. You should know that we have not changed autoParagraph config option so it defaults to true and I don't recommend disabling it in config level. I'll try to code comment this solution well so that you get a good idea what is actually done here.

config.on.instanceReady = function(e) {
    var enterMode = e.editor.config.enterMode, elem = 'div';
    if(enterMode === CKEDITOR.ENTER_P) {
        elem = 'p';
    }

    // We didn't encounter any issues when using br as enterMode so
    // continue only if enterMode is div or p element
    if(enterMode === CKEDITOR.ENTER_DIV || enterMode === CKEDITOR.ENTER_P) {
        // Disable autoParagraph in initialization to avoid nested div issue.
        // When autoParagraph is manipulated this way it will still be active
        // later on so if you write some inline content in source mode it
        // will be properly wrapped inside <p> or <div> element.
        e.editor.config.autoParagraph = false;

        // Handle paste event to get rid of <br /> line breaks issue
        e.editor.on('paste', function(evt) {
            var data = '';

            // Stop event, handle everything here manually
            evt.stop();

            // Get data either from event's text or html property
            if(evt.data.text) {
                // Remove HTML markup from pasted data
                data = evt.data.text.replace(/(<([^>]+)>)/ig, '');
                // Replace all line breaks with </div><div> or </p><p> markup
                // And wrap the whole content inside <div> or <p> element
                data = '<' + elem + '>'
                 + data.replace(/\r\n|\r|\n/g, '</' + elem + '><' + elem + '>')
                 + '</' + elem + '>';
            } else {
                // If data was not pasted as plain text just
                // get data as is from event's html property
                data = evt.data.html;
            }

            // Insert HTML data to editor
            evt.editor.insertHtml(data);
            // Fire afterPaste manually as we have stopped the event
            // and afterPaste wouldn't get triggered otherwise
            evt.editor.fire( 'afterPaste' );
        }, e.editor.element.$);
    }
};

Upvotes: 1

ghostCoder
ghostCoder

Reputation: 7655

Here is the workaround i finally designed-- http://thecamelcase.com/2011/06/reining-in-the-cursor-in-ckeditor/

Upvotes: 1

Related Questions