How to trim spaces and new lines rendered by a CKEditor?

Question

I'm using a CKEditor (along with a CKFinder). I need to validate the contents rendered by it before storing into a database.

If the contents rendered by the CKEditor is blank then a validation violation message should appear. This can be done easily on the server side but if a user only enters white-spaces and new lines then that should be trimmed and no contents should be inserted into the database violating the validation rule.

It is not possible by simply using a function like String.trim() (regarding Java) on the server side because the CKEditor renders HTML. If I only enter some white spaces and new line characters then the HTML which is rendered looks something like the following.

<p>            
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
</p>

<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

Which actually represents some white-spaces and new line characters which cannot be trimmed by simply using a server side function. So what is the way to perform a validation in such situations?

have you tried using enterMode:CKEDITOR.ENTER_BR to see if it helps - this will go in your client side JS file - CKEDITOR.replace('editor1', { enterMode:CKEDITOR.ENTER_BR}); — ali haider, Mar 28 '13 at 17:10
@alihaider - I will try it and later reply with a comment here. Many thanks. — Tiny, Mar 28 '13 at 17:13
I just quickly tested - I think with that configuration, the following tags do not get removed: — ali haider, Mar 28 '13 at 17:16
Has anyone found the solution to this problem yet? Using java at server side — John, Jun 05 '20 at 09:59

score 0 · Answer 1 · answered Oct 23 '13 at 11:17

I'm a gigantic nerd and made a small suggestion for this. Basically get the CKEditor value, vomit it into a throwaway DIV, get the length of that content with jQuery and compare it to 0.

I made a jsfiddle example that uses a contenteditable DIV for the CKFinder and throwaway at the same time. Here is the JavaScript, I hope you get the idea. If not, please ask questions and I will attempt to clarify my twisted code.

$(function() {
    // this just keeps track of the contenteditable
    // replace with your submit or whatever event
    $('body').on('focus', '[contenteditable]', 
            function() {
                var $this = $(this);
                $this.data('before', $this.html());
                return $this;
            }).on('blur keyup paste', '[contenteditable]', function() {
                var $this = $(this);
                if ($this.data('before') !== $this.html()) {
                    $this.data('before', $this.html());
                    $this.trigger('change');
                }
                return $this;
            });
    $('body').on('change', function() {
       validate();
    });

    // This actually validates the string as 0-rendering or not.
    function validate() {

        // Replace this text getter with getting the CKE content
        // Then vomit it into a DIV like check and then get it again.
        // just keep #check invisible with CSS.
        var text = $('#check').text();
        var l = text.trim().length;

        // if length is 0, it renders as whitespace only
        // I show a message to whine about that
        if (l === 0) {
            $('#aaa').text("DOES NOT PASS");    
        }
        else {
             $('#aaa').text("PASS");   
        }   
    }
    validate();
});

score 0 · Answer 2 · answered Jun 05 '20 at 10:19

Just pass the text editor string to this method if it returns true that means we have empty string with no actual text content.

public boolean validateSpace(String str) {
        if (str != null) {
            String replaceStr = str.replace("&nbsp;", "").replace("<p>", "").replace("</p>", "").replace("<br>", "").replace("<br />", "");
            if (replaceStr == null || replaceStr.trim().isEmpty()) {
                return true;
            }
        }
        return false;
    }

How to trim spaces and new lines rendered by a CKEditor?

2 Answers2