在 tinymce 所见即所得编辑器中保留空白换行符

Question

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.

Answer 1

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.

Answer 2

As far as I know, there's now 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');
}