ckeditor getData() cuts the text after double "enter" with jquery

Question

This is my code:

<div class="cmt-container" >
<div class="new-com-bt">
        <span>Write an answer ...</span>
    </div>
    <div class="new-com-cnt">
        <input type="text" id="name-com" name="name-com" value="" style="width: 150px;" placeholder="Your name" />
        <input type="email" id="mail-com" name="mail-com" value="" style="width: 150px;" placeholder="Your e-mail adress" />
        <textarea class="the-new-com" id="ckeditor_id" name="ckeditor_id" placeholder="Your answer"> </textarea>
        <div class="bt-add-com" style="margin-top: 10px;">Post answer</div>
        <div class="bt-cancel-com" style="margin-top: 10px;">Cancel</div>
    </div>
    <div class="clear_comment"></div>
</div>

<script>
    CKEDITOR.replace( 'ckeditor_id' );
</script>
<script type="text/javascript">
   $(function(){ 
        $('.new-com-bt').click(function(event){    
            $(this).hide();
            $('.new-com-cnt').show();
            $('#name-com').focus();
        });

   $(".bt-add-com").css({opacity:1});

        $('.bt-cancel-com').click(function(){
            CKEDITOR.instances['ckeditor_id'].setData('');
            $('.new-com-cnt').fadeOut('fast', function(){
                $('.new-com-bt').fadeIn('fast');
            });
        });

        $('.bt-add-com').click(function(){
            var theName = $('#name-com');
            var theMail = $('#mail-com');

            if( !CKEDITOR.instances['ckeditor_id'].getData() ){ 
                alert('You need to write an answer!'); 
            }else{ 
                $.ajax({
                    type: "POST",
                    url: "http://www.mywebsite.com/add-answer.php",
                    data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+CKEDITOR.instances['ckeditor_id'].getData(),
                    success: function(html){
                        CKEDITOR.instances['ckeditor_id'].setData('');
                        theMail.val('');
                        theName.val('');
                        $('.new-com-cnt').hide('fast', function(){
                            $('.new-com-bt').show('fast');
                            $('.new-com-bt').before(html);  
                        })
                    }  
                });
            }
        });

    });
</script>

My problem is that when a user posts a photo and then he pushes two times in a row the enter button the text cuts right after the image.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac rhoncus mauris, nec porta dui. Curabitur a turpis et dolor pulvinar blandit. Mauris porta vestibulum odio vel scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer consectetur sem vitae urna malesuada, ut ullamcorper justo interdum. Donec in vestibulum libero. Nunc ornare pellentesque turpis quis accumsan. Donec orci dui, condimentum convallis nunc et, lacinia accumsan quam.

(2 rows of space)

image

(2 rows of space)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac rhoncus mauris, nec porta dui. Curabitur a turpis et dolor pulvinar blandit. Mauris porta vestibulum odio vel scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer consectetur sem vitae urna malesuada, ut ullamcorper justo interdum. Donec in vestibulum libero. Nunc ornare pellentesque turpis quis accumsan. Donec orci dui, condimentum convallis nunc et, lacinia accumsan quam.

In the example above, the the first paragraph and the image will insert in the database and the second no.

This is bad for my website. Any idea how to fix this?

Thanks

Answer 1

It is not ckeditor.getData () that does it. In the POST request itself, the date is split due to two double "enter".Use encodeURIComponen(CKEDITOR.instances['ckeditor_id'].getData())