We Keep Coding

Preserve white space line breaks in tinymce wysiwyg editor

I have a tinymce editor implemented in my react project installed through the package
"#tinymce/tinymce-react": "^3.12.6".
I am trying to preserve the white space line breaks of the data which comes from external source (excel file) when being edited in the wysiwyg editor but I have not been able to do so. I have tried the options such as force_br_newlines and convert_newlines_to_brs but it does not seem to help
Scenario explanation in detail:
I have an excel file which has multiline text which gets imported to the app. The multiline text is preserved in the database and I get the text displayed in multi lines when I log it to the console. (The console does not output new line characters line \n, \r,etc and just white space line breaks like in the original text). But, when I edit the same data with tinymce editor, the tinymce editor puts all the data in one line.
The original text is not html text and we cannot expect the end user to type HTML tags inside the excel file such as
<p>...</p> or <br />
Example data in the excel file:
This is line one
This is line two
This is line three
Data when it gets displayed in the editor:
This is line one This is line two This is line three
I would like the editor to preserve the line breaks. Is that possible? How can it be achieved? Your help would be really appreciated. Thanks in advance.

As far as I know, there's no way to achieve that with TinyMCE, for the reasons outlined by #micheal-fromin.
The best you can do is search for new lines (\n and/or \r) in the source text and replace them with HTML line breaks (</br> ).
PHP solution
PHP has a very handy function that does exactly that: nl2br().
The problem with nl2br is that it will also replace newlines within HTML tags. If that's an issue for you, I recommend replacing blocks of text with paragraph tags (<p>) using either autop() (pure PHP) or wpautop() (in WordPress).
Javascript solution
In Javascript, nl2br translates to:
function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>'; // Adjust comment to avoid issue on phpjs.org display
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

TinyMCE is an HTML editor so when you pass it a string of plain text it is converting it to HTML. As the newline characters etc are not valid HTML they are simply removed.
If you have newlines in your content you could convert them to some sort of valid HTML.
When you extract content from TinyMCE you have an option to get plain text and it will convert paragraphs (<p> tags) to 2 newlines (\n\n) and line breaks (<br> tags) to one newline (\n). You could do the reverse with your text file to create HTML that represents the line breaks appropriately.

Mustache.js allow only line breaks, escape other HTML

I am creating comments from user input and rendering them using Mustache.js after a user clicks 'submit'. I realize I can replace user input line breaks (\n) with <br/> to render as HTML breaks, such as
myString.replace(/\n/g, '<br />');
and I realize I can make Mustache not escape HTML by using triple brackets
{{{myString}}}
However, I would like to escape all user HTML as Mustache would typically do with double braces {{ ... }}, with the exception of allowing line breaks with <br/>
What is the best way to do this? I can replace the line breaks after it has been rendered, but that seems like a very inefficient solution, and I'm thinking there has to be a better way.

Option 1 - Use a pre tag:
It's actually best (or efficient) that you wrap text in a <pre></pre> tag, which will preserve the white space in the text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
And enable word-wrap
How do I wrap text in a pre tag?
- http://jsfiddle.net/X5ZY7/
Option 2 - Split your string into lines, and use a mustache each:
comment = userComment.split("\n")
{{#comment}}
{{comment}}<br/>
{{/comment}}
Option 3 - Manually escape your string using your favorite method before injecting the tags:
var div = document.createElement("div")
div.textContent = comment
comment = div.innerHTML.replace(/\n/g, "<br/>")
{{{comment}}}

If you're looking to add line breaks to a textarea you need to replace \n with

Removing html line breaks using Javascript

I'm trying to grab an element's HTML using jQuery and then post it to the server. I successfully grabbed it, but I am not able to remove the white space between the tags and the line breaks that are rendered by default. The HTML code grabbed is shown below:
<table><tbody><tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
<tr><th>2nd row</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
I would like to trim the spaces between the tags only. I've used this regular expression: str.replace(/\s+/g, ' ');. But that doesn't seem to work, any suggestions?

Currently, you are replacing all consecutive sequences of whitespace with a single space.
This is what you want:
str.replace(/>\s+</g, '><');

I need to add escape character(backslash - ) character at the end of each line to wrap the string.

How to dynamically add whitespace in element's text?

I want to insert whitespace in DOM element.
For instance, I want to change this
<a></a>
to this
<a> </a>
If I manually add &nbsp to DOM element, then it renders &nbsp as a whitespace. But when I want to add this dynamically, I use innerText,
a_element.innertText = "&nbsp"
and as result it doesn't convert &nbsp to whitespace and renders it as a text (<a>&nbsp</a>). How can I fix this?

Use .innerHTML as you need to edit the HTML of that particular link.
a_element.innerHTML = " "

HTML entity references are processed only in HTML parsing. In any case, it is best to put the character directly into the content. If you do not know how to type the no-break space in your authoring environment, you can use the \xA0 or \u00A0 escape in JavaScript:
a_element.innerText = "\u00A0";
BTW, the no-break space is not a whitespace character by HTML specs.

You can also just copy the whitespace character you want and paste it into your javascript string. For instance, I had a   in my html; when I loaded the page, I copied that space and pasted it into a string in my javascript:
var myString = "Here is   --> <--";
Note that it looks like a regular space on here, but it renders into the original whitespace copied.

How do I make the whitespace behaviour in a <textarea> and a HTML preview match?

I have a <textarea> element. When the user fills it, you can see the spaces they made and when they pressed Enter to jump to the next line.
This is great, but when I see the HTML output, the result differs. It is an endless sentence without line breaks.
Using only HTML or JavaScript, how can I fix this?

You probably want something like:
<p style="white-space: pre-wrap"></p>
<p style="white-space: pre"></p>
<pre></pre>
pre-wrap:
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML

If you are just taking what is entered in a textarea and outputing it as html, you would see this. For starters, you could replace all spaces with and all newlines with <br>. Or put the output in <pre> tags. (In either case, you will also want to replace some other characters with entities too.)