Preserve white space line breaks in tinymce wysiwyg editor - javascript

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.

Related

How can I fix emails googlesheets

Help. I'm trying to send an automated email using this code.
function checkIn() {
var aemail=SpreadsheetApp.getActiveSpreadsheet();
var tracker= aemail.getSheetByName("Tracker");
var template= aemail.getSheetByName("Templates");
var message=template.getRange('B3').getValue();
var signature= template.getRange('C3').getValue();
for (var i=2; i<=2;i++) {
var sname =tracker.getRange('A'+i).getValue();
var subject = tracker.getRange('B'+i).getValue();
var eaddress = tracker.getRange('C'+i).getValue();
var finalmsg = ""
finalmsg="Hello"+""+sname+","+"\n"+"\n"+message+"\n"+signature;
MailApp.sendEmail(eaddress,subject,finalmsg);
}
}
The email sends but the text alignment is to the right and does not expand to the email space. How can I fix this? I fixed it once but can not remember how. I know it's not code-related.
It looks like it will depend on the data in the range B3. It probably has newlines included in it - if its not that then maybe its best to share a sample sheet so that it can be tested.
You can also try and add this code to replace newlines with spaces
Change
var message=template.getRange('B3').getValue();
To
var message=template.getRange('B3').getValue().replaceAll("\n", " ")
If you want more control over how things look, you can also try using an HTML body with the sendEmail method. Using it like this:
MailApp.sendEmail('mike#example.com', 'example', 'body without html', {
htmlBody:"<h1>Body with HTML</h1>"
});
The normal body is included since not all clients render HTML, so if a particular mail client does not render HTML, then it will use the plain text version.
That said, I do think that your issue is to do with newline characters \n making their way into your message.
Reference
replaceAll
sendEmail
EDIT
I was wrong.
After running some tests it is true that if your Email is completely plain text, then Gmail will automatically insert line breaks.
You will need to use the options and htmlBody parameters mentioned above.
You can use it like this:
function sampleEmail() {
var message="Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks Long Text without line breaks "
MailApp.sendEmail("[YOUR EMAIL]","test", message,{htmlBody:"<p>"+ message +"</p>"});
}
The arguments are as follows:
The email of the recipient
the subject
the plain text message (as a fall back in case the client's email does not support HTML)
the options parameter with one attribute htmlBody where the message is simply wrapped with <p> HTML tags.
This text will now adapt and fill the width of the screen in an email client that supports HTML, like Gmail.

Formatting text from process to HTML

I am output from a process in python to be displayed on a webpage, however I am unable to format this text properly as <br>, \n and \t is rendered onto the page.
Attempts
Replace \n with <br> or <\br>, then place changed text into <p> tag
Use a <pre> tag with the unformatted text containing \n and \t
encode the text as unicode on the server line = unicode(output.strip())
removing all quotes from within string
Tried using python html module but characters rendered as is line = html.escape(output.strip())
Note
I am using React so I cannot edit the DOM directly, I have to manipulate state.
Example lines
unformated i.e. leaving newlines etc
<pre className='console_text' key={i}>{el}</pre>
or (with replacements) i.e. replace newlines with br tag and tabs with spacing character
<p className='console_text' key={i}>{el}</p>
Note also
I am able to send other text from the server myself which contains newlines and it is formatted properly, I believe it has something to do with either the text formatting or some hidden character(s) that escapes everything but I am unable to find it, I'd appreciate any guidance.
Console output
You need to escape HTML characters, see Escaping HTML

How to initialize CKEditor textarea line breaks as like html textarea line breaks

HTML textareas can recognize line breaks (enter button) and i can save the element's text value into database. Then i can get those data, set it on any textarea, i still have line breaks (no problem until here).
CKEditor textarea puts <p> or <br /> after line breaks. When i remove these tags, CKEditor cannot recognize there's a line break.
Purpose : I'm using a word counter plugin with CKEditor, so i need to use CKEditor as like a textarea. I need the plain text value.
I tried these so far :
CKEDITOR.instances.editor1.document.getBody().getText()
Yes i can get the text value correctly, i put this value on DB, but when i reload my page, the line breaks are gone. Because ckeditor works only with html tags ?
config.autoParagraph = false;
This one just removes the <p> tag at the beginning of the content.
I need plain text+line breaks that's it. Any suggestions ? Or should i write down my own classes ?
Array.prototype.map
.call(CKEDITOR.instances.editor1.document.getBody().$.childNodes,
function(item){
return item.innerText;
})
.join("\n");
Just a crazy answer to convert <p> blocks to a string separated by \n

Special symbols in wysihtml5 editor

I use wysihtml5 editor on my site and I would like to have the following functionality - if user inserts text with special characters they are transformed to html entities.
For example, user inserts:
"Sample text, sample text, sample text ©"
I need to transform it to:
"Sample text, sample text, sample text ©"
I didn't find any information related to special symbols in editor docs. One of the method I think about is to create listener for paste event and process special characters at this step.
Could you advice what is the best way to add this functionality to the editor?
you can use a RegExp character range to replace() them using a dynamic function:
strNew=strOld.replace(
/([\u00A0-\u00FF])/g,
function(j,a){
return "&#" + parseInt(a.charCodeAt(0), 16) + ";" ;
}
);
live demo : http://pagedemos.com/27w7n4n58qpk
this could be applied from the string you get back from your editor, or i guess, on the innerHTML of the editor's contenteditable tag.

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

Categories