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.

How to place back caret after a text insert?

I'm doing a text expander functionality. Basically if I insert something like "HW" the code will detect "Hello World" and insert that into the editor.
How do I set the caret after my text? I only found methods to set selection that take a node, but this doesn't quite apply. In other editors like Redactor there is a unicode character that can be added to the string so the editor knows where the caret should be.
How to do this with Froala?
Thanks

You could easily do that in Froala Editor by using markers. If you would like to place cursor between Hello and World when you insert the HTML, you could do it like this:
$(selector).froalaEditor('html.insert', 'Hello ' + $.FroalaEditor.MARKERS + 'World');

Make my textbox understand html img tag

When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( ':)'--> put the image represent it inside my textbox )

One way: Instead of a text box, use a <div contenteditable="true"></div>. As the user types, change occurrences of the smiley for the image. When the form is submitted, your javascript needs to translate the contents of that div back into plain text and put it into a field for submission.

If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a <span>, rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate <img>.
A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:
HTML:
<input class="emojify" type="text" />
JavaScript (using jQuery, to make everyone's life easier):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.

Displaying strings in italics using javascript

I am using a multiline text in xul and in I need to display a string. however part of the string needs to be in italics and if a use the .italics() method in javascript all that's displayed is the Blink! tags next to the string. Is there another way to make the string italics using javascript?

String.prototype.italics() just wrap the text with <i> and </i>, this only works in HTML not XUL.
When you say 'a multiline text', are you reference to <textbox> element in XUL? If so this wrapper doesn't work with rich text. try some other element to contain your text.

I am not positive if this works on a XUL-document, but you could try the style-object:
document.getElementById("myString").style.fontStyle = "italic";

Quote in HTML attribute destroys layout

My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.

You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.

I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")

The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.