line break and paragraph has doubled itself every time I save the document ckeditor adding extra spaces paragraph and line breaks after every saving

Question

Hi I have implemented the ckeditor in my asp.net and vb.net web application. After a lot of struggle its working fine.

But its adding a lots of line breaks and paragraphs (specially copying and pasting from word file ) after every save. The editor is placing extra <br/> in side the html after submission of the page.

If there is one line break its adding 4 line breaks. if I submit

xxx<br>yyy 

after submission it is becoming

xxx<br/><br/><br/><br/<br/><br/>yyy

To clarify when copying and pasting for the first time we do NOT see this behaviour, the problem is only seen on subsequent edits/saves.

Please advice me how i can handle that. So that it does not adds extra line breaks and paragraph after saving the form.

Here are the steps which I have followed to implement ckeditor.

1. Downloaded the ckeditor from the link http://ckeditor.com/download. I am using the full package

2. Copied the whole folder under project folder.

3. In the master page added the following lines to add reference of ckeditor

   <script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
   <script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>
   <script src="/ckeditor/ckeditor_custom.js" type="text/javascript"></script>

4. Changed the class for the specific textarea

<textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"></textarea>

5. Added following javascript function at the bottom of the content page

$('#' + '<%= btnSave.ClientID%>').mousedown(function () {
    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
    }
});

Thats it. nothing has changed in the code file

here the btn.save is the button which submits the data

To describe the problem clearly I am providing the case situation below.

Suppose I want to copy padte the follwing text from a word file.

Working Log • 1st Week : Introduction o Discovered the location of the website o Started familiarise with the websites and portal.

After pasting it into ck editor the html source of this is like following

<p><strong>Working Log</strong></p>
<ol style="list-style-type:lower-roman">
   <li>1<sup>st</sup> Week : Introduction
    <ul style="list-style-type:circle">
        <li>Discovered the location of the website</li>
        <li>Started familiarise with the websites and portal.</li>
    </ul>
   </li>
</ol>

But when I save the form and open it again the source code becomes like this

        <p><strong>Working Log</strong></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <ol style="list-style-type:lower-roman"><br />
        <li>1<sup>st</sup> Week : Introduction<br />
          &nbsp;
        <ul style="list-style-type:circle"><br />
            <li>Discovered the location of the website</li>
            <br />
            <li>Started familiarise with the websites and portal.</li>
           <br />
           <br />
           &nbsp;
        </ul>
        </li>
           <br />
         <br />
        &nbsp;
         </ol>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

And the line break and paragraphs doubles and triples after each submission of the form.

Driving me mad. Please help how can i handle the situation.

----------------- Why My problem is different from the question asked in this link Removing unwanted newline characters when adding <p> in CKEditor -----------------

The question asked in that link does not explain all the detail. in my question i have explained clearly when I can see this problem. the person asked the question in the above mentioned link if he has copied and text from a word document or has he used html tags to format the text in the editor. I have mentioned every detail so that it becomes easy for the people who will answer the question.

The problems was also different. The problem in the mentioned link was only concerned with the <p> replaced by indent. Whereas in my case every line break <br> and paragraph <p> has doubled itself every time I save the document . I was copying text from word document and mentioned it in my question. I did not find any detail in the question in above mentioned link.

Situations are different for different coder. the person asked that question did not explain what is his coding environment. I have implemented CKEditor in Vb.Net and ASP.net based web app and I mentioned that in my question. I also mentioned every steps how I have installed the editor in the app. But the person who asked the question in the link did not included any details. Also trying the solution given in his question did not solve my problem. So I included all the details in my question. And my solution is also different.

The answer given in the mentioned link did not solve my problem. i had to set every rules as false to get rid of the problem. Whereas in the answer of the above mentioned link two of the rules were set as True. Also the function CKEDITOR.editorConfig = function (config) { was not mentioned in the answer to the question mentioned in the link. Hence the question given on that link was not helpful for me.

Answer 1

I have solved the problem by adding the following lines of code in the config.js file.

CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.on('instanceReady', function (ev) {
    var writer = ev.editor.dataProcessor.writer;
    // The character sequence to use for every indentation step.
    writer.indentationChars = '  ';

    var dtd = CKEDITOR.dtd;
    // Elements taken as an example are: block-level elements (div or p), list items (li, dd), and table elements (td, tbody).
    for (var e in CKEDITOR.tools.extend({}, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
        ev.editor.dataProcessor.writer.setRules(e, {
            // Indicates that an element creates indentation on line breaks that it contains.
            indent: false,
            // Inserts a line break before a tag.
            breakBeforeOpen: false,
            // Inserts a line break after a tag.
            breakAfterOpen: false,
            // Inserts a line break before the closing tag.
            breakBeforeClose: false,
            // Inserts a line break after the closing tag.
            breakAfterClose: false
        });
    }

    for (var e in CKEDITOR.tools.extend({}, dtd.$list, dtd.$listItem, dtd.$tableContent)) {
        ev.editor.dataProcessor.writer.setRules(e, {
            indent: true,
        });
    }



});
}

if anyone facing the same problem like me just copy the above code and paste it in the config.js file in the ckeditor folder.

Thank you mo for your answers. You have been very helpful

Answer 2

you can avoid that by:

config.autoParagraph = false;

or

config.enterMode = CKEDITOR.ENTER_BR;

or

CKEDITOR.on('txtDescription', function (ev) {
        ev.editor.dataProcessor.writer.setRules('br',
         {
             indent: false,
             breakBeforeOpen: false,
             breakAfterOpen: false,
             breakBeforeClose: false,
             breakAfterClose: false
         });
    });

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;

and for more information see Output Formatting in CKEditor