javascriptckeditorckeditor4.x

ckeditor 4 adds extra spacing when submitted data


Hello all I am working on a project where I need to submit some HTML data to a database and then show it to the page, and I am using CKEditor 4 for that purpose

<script src="https://cdn.ckeditor.com/4.13.1/standard-all/ckeditor.js"></script>

everything is great except these 2 issues.

PENDING 1. when I put some HTML by copy-paste from word file or even if I type it and submit, the data displayed on the page has much larger spaces between the paragraphs, etc. when I do the same CKEditor 5 it works great but I can't use CKEditor 5 as I am using a plugin which is only working in version 4

SOLVED 2.when I submit the data it sends as empty HTML and if I submit it again then the data is submitted. I mean the value of textarea is not sent to the other page in first submit ever.

my code is here

<textarea name="ques" class="form-control ckeditor" placeholder="Describe the question" id='richtext' style="height: 150px;"></textarea>


//script
CKEDITOR.replace('desc', {
  extraPlugins: 'mathjax',
  mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
  height: 320
});

if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
  document.getElementById('ie8-warning').className = 'tip alert';
}

Please do advice me how to fix these 2 issues. I will also post my answer if I find a solution. Thank you so much for any help.

EDIT

i fixed the data submition issue by this ajax

    var richtext = document.getElementById('richtext');
CKEDITOR.replace('richtext', {
      on : {
            change: function ( evt )  {
            $(richtext).html(evt.editor.getData());
            }
        },
      extraPlugins: 'mathjax',
      mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
      height: 320
    });

    if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
      document.getElementById('ie8-warning').className = 'tip alert';
    }

UPDATED problems

Point 1 as mentioned above and

New point : Point 2 got solved by adding the above code but it does when i submit the first time and then when i do not refresh the page and submits it again it sends the previous data even if i change the data in textarea.


Solution

  • This is what solved the issue

    $(richtext).html(evt.editor.getData().replace(/(\r\n|\n|\r)/gm,"") ) ;