Display rich text in ExtJS component - javascript

I'm trying to display some rich text in a component with a tpl in my extjs application. I get the rich text from my database and it looks like this:
this is some example text \r\n\r\n with two line breaks
At the moment extjs just displays the text but I want it to also make the line breaks.
On the server-side I use PHP and the data then gets loaded into extjs via a direct layer.
Are there any possibilities to do this? The best thing would be if you could somehow translate the rich text to HTML.
Here is an example of my tpl:
tpl:[
'<h2>Some HTML Title</h2>'
'{RICH_TEXT}'
'<p>Some more HTML Stuff</p>'
]
Thanks in advance for your help.
EDIT:
I also encountered some cases where there is more than just some line breaks for example:
{\rtf1\ansi\ansicpg1252\deff0{\fonttbl{\f0\fnil\fcharset0 MS Sans Serif;}}
{\colortbl ;\red0\green0\blue0;}
\viewkind4\uc1\pard\cf1\lang2055\b\f0\fs16 text text text\b0 , more text }
How can I handle this? If there is no possibility, how can I get rid of that stuff and just display the clear text, because this is visible in extjs.

In JS you can replace the linebreaks with br tags with the following
str = str.replace(/(?:\r\n|\r|\n)/g, '<br />');
Or, you can do this same process on the PHP side before the data is sent using the built in function nl2br: http://php.net/manual/en/function.nl2br.php

Related

Custom tags in TinyMCE WYSWYG

I have an application which help our user to format the email template. A sample email template looks like this:
Dear <FirstName> <LastName>:
Thank you for your entry <Title> and your order number is <OrderID>....
These are saved in our database as Text. The issue is when i try to load this text in simple Textarea it works fine when i try to display this text in TinyMCE editor textarea it cuts off when it see the first "<" and display something like this:
Dear :
Thank you for your entry and your order number is ....
TinyMCE dose not render the tags. i dont know how to render the custom tags and they are not <abc> </abc> tags. Our system will replace the "<SomeValue>" with the actual value based on the tag and send the email to the client.
I tried replacing the "<" and ">" to "<" and ">" and its not working. I also tried them replacing it to "<code><" and "></code>" before i bind the textarea but that is not working either. I have added "code" plugin while declaring my TinyMCE in javascript. Do i need anything else, any specially "entity_encoding"? I tried "raw" and "html" nothings works.
here is my javascript
<script>
tinymce.init({
selector: '#mytextarea',
entity_encoding: "html",
plugins: "code",
toolbar: 'code'
});
</script>
Any help is appreciated as i have spend two days searching the web and trying bunch of things.
If you want TinyMCE to treat these elements like HTML tags you need to define them as custom tags:
https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements
An alternative which may take less effort to setup is to use another syntax (e.g. {first_name}) along with marking that text as non-editable so that TinyMCE treats the entire string like one "character" in the UI.

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.

String with new line and tabs to display in HTML

I have a string coming from my java backend which is formatted to display in a certain way, the new line, tab and space characters are in certain positions.
How do I get this to display the same way in HTML?
For example, say I have the current string in Javascript as so:
var str = "\t\tTitle \n Some text \t\t\t more text";
Browsers typically strip out extra white space, you might need to put it inside a preformatted text block or use white-space: pre
var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);
Also yes, you need to use backslahes too, as mentioned about.
I might be late but just in order to help if a beginner like me is facing this kind of problem.
You can add a css class to the html tag where you want to display the data. In my case I am using ngFor of Angular 2. The data coming from my back end had line breaks and tabs. So I just added a class to the html tag with a css white-spacing style as follows.
Backend Data"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
And the css
.response-title {
white-space:pre;
}
This one do the job perfectly.
You can use textarea also. here is a Working Fiddle
MDN textarea

Summernote content coming with html tags

I am new to summernote text editor. I am trying to get the proper content from the summernote textarea, which infact coming with html tags.
I tried
<textarea class="summernote" id="summernote" ng-model="blog.content" ></textarea>
in my html page and getting the textarea content with,
$("#summernote").code();
it is fetching the content in
html tags. I want the content to be displayed without the html tags.
Thank you for the advice.
Use val() to get all what entered in textarea or text, So :
var content = $("#summernote").val()
in laravel, simple use
{!! $product->small_description !!}
instread of
{{! $product->small_description !}}
in blade file where you want to fetch the data
Use $().text() method to get plain text.
$("<div />").html($("#summernote").code()).text();
After a long time of searching , thought instead of trying that in getting summernote text editor value with plain text, why not try with the angular filter. So searched and got the filter which exactly does what I needed.
Here is the link which did my job.
angularjs to output plain text instead of html
I had the same problem, "fixed" it by using version 0.6.16 instead of the current stable version 0.7. HTML is rendering fine now without extra js code.

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.

Categories