TinyMCE Editor removing whitespace

1
votes

I am using version 4.1.5 of TnyMCE Editor and when i do assign the HTML content with white space as below

<h1>Hello this is text with                    whiteSpace</h1>

its removing the white space in TinyMce Editor. How we can keep the white space in Tiny MCE Editor?

enter image description here

Regards Vik

2
javascriptjqueryhtmltinymce
It's not TinyMCE that does this, but HTML itself as duplicated whitespace is ignored. If you want the whitespace to be retained use non-breaking spaces (&nbsp;) - Rory McCrossan

2 Answers

2
votes

Here is a function which can convert your string to an HTML compatible version.

function encodeWhiteSpaces(str) {
   return s.split('').map(function(c) {
    if (c === ' ') 
        return '&nbsp;'
    else
        return c;
   }).join('');
}

The string is converted to an array(split), then created a new arrray (map) with all white spaces converted to &nbsp;, finally join the array back to a string (join).

Also you can use string replace method to convert all the white spaces to &nbsp;

s.replace(" ","&nbsp;");
0
votes

It is as Rory already stated. Browsers ignore several spaces. In order to solve this issue you will have to insert/encode your spaces with non-breaking spaces between the regular spaces.

Example: 

"      " // six spaces
" &nbsp; &nbsp; &nbsp;" // needed encoding