Line break and paragraph double each time I save a ckeditor document, adding extra spaces and line breaks after each save

Hi, I implemented ckeditor in my asp.net and vb.net web application. After a big fight, it worked fine.

But its adding a lot of line breaks and paragraph breaks (especially copying and pasting words from a file) after each save. The editor adds extra <br/>to the html side after submitting the page.

If there is one line, break it by adding 4 line breaks. if i send

xxx<br>yyy 

after the presentation becomes

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

To clarify, when we copy and paste the first time, we DO NOT see this behavior, the problem is visible only with subsequent changes / saving.

Please advise me how I can handle this. So it does not add extra lines and paragraphs after saving the form.

Here are the steps that I followed to implement ckeditor.

1. Download ckeditor from the link http://ckeditor.com/download . I use the full package

2. I copied the entire folder to the project folder.

3. The following lines are added on the main page to add the ckeditor link

   <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 a specific text area

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

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

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

Here it is. nothing has changed in the code file

here btn.save is a button that sends data

To clearly describe the problem, I provide the situation below.

, padde .

• 1- : o - o .

ck html

<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>

,

        <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>

.

. .

----------------- , <p> CKEditor -----------------

, , . , . , , html . , .

. <p> . break <br> <p> , . . .

. , , . CKEditor - Vb.Net ASP.net, . , . , , . , , . . .

, , . , . True. CKEDITOR.editorConfig = function (config) { , . , , .

+4
3

:

config.autoParagraph = false;

config.enterMode = CKEDITOR.ENTER_BR;

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;

. CKEditor

+3

, config.js.

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,
        });
    }



});
}

- , , config.js ckeditor.

.

+5

Your problem is not in CKEditor or its configuration.

Instead, you should look at the server code and remove the nl2br calls

+2
source

Source: https://habr.com/ru/post/1545056/


All Articles