Search code examples
vue.jsckeditor

CKEditor 4 in Vue - how to prevent word breaking?

In my Vue project I have a CKEditor. The problem with it is that it breaks words instead of breaking spaces:

enter image description here

In code inspector it looks like this: enter image description here

I can't find a way to make it break on spaces instead of words. I tried to put white-space: nowrap; on the body (in the debugger, just to see if it works), but it just made all this text appear in one line. word-break: keep-all; didn't do anything.

One thing I must notice - I don't have defined width on the editor component. It just uses all available space.

Is there anyway to still make it break white spaces instead of words? Any suggestions?

Solution

  • Found sort of a solution, perhaps could be useful to somebody. The issue is with   entities. Basically CKEditor creates one very long string, which doesn't have spaces. I solved it by running the following method, which replaces all the  s with regular spaces, on every content change and passing the content as argument:

    const removeNBSP = (text: String) => {
  return text.replace(/ /g, " ")
}