Convert String to HTML on React , rich text editor - javascript

I am using React-Quill to add Rich text editor to my app.
have the next string store in my DB:
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
Now I want to "Render" the text const in a REACT component, but with the "Styuling" that HTML gives to it.
Hello World
Next Line
How can I do it? or other rich text editor to achieve that?

You can use dangerouslySetInnerHTML
Source: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
<div dangerouslySetInnerHTML={{__html:text}} />

react-quill supports HTML strings out of the box, so there's nothing to do except set the value property of the component with the string you receive from the database.
<ReactQuill value={text} ... />

Yeah react-quill is the way for working with React. I also have had a small demo to demonstrate how it works (we might have to put some css files to make it looking good): https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App.js

Related

React - dangerouslySetInnerHTML being displayed as plain text

I've created a React app that displays job postings. When I click on a job post in the list, that particular job post's details are displayed.
I'm trying to display the body of the job post in the same way that it has been formatted at the source. To do that, I've tried using the following code:
<div id="apply-now" className="apply-section">
<h3>How to apply.</h3>
<div dangerouslySetInnerHTML={{ __html: currentJob.description }}></div>
</div>
However, when the component is rendered, the content is not formatted and is displayed in plain text without the appropriate formatting.
Here's an example that hasn't been formatted:
The word __"Application"__ should be in bold, the website link should be an actual link, as should "Click here for an application form" link.
The data I'm getting back from the API call is the same as above:
Join us! - We are looking forward to your application via the "Application" form Your contact: Ralph Ullmann Telefon: 089/ 5511 333783 https://www.consorsfinanz.de/karrier Click here for the application form!"
^^ Even above on StackOverflow it works! But I can't get it to work in my app!
I've been tearing my hair out for hours trying to fix this and I can't even understand why it doesn't work.
This sounds like an algorithm challenge. Sorry thought it could be done in an elegant way, but regex would be the better option
Use regex to match anything inbetween two underscores
In each match, replace remove the underscores and wrap each element in strong tags
const mdBoldToStrong = (text) => {
const surroundingUnderscores = new RegExp(/__(.*?)__/g)
return text
.replace(surroundingUnderscores, (word) => {
return `<strong>${word.replace(/__/g, '')}</strong>`
})
}
console.log(mdBoldToStrong('__Application__'))
console.log(mdBoldToStrong('Text__Application__Text__'))
console.log(mdBoldToStrong('__Text____Application__Text'))
Please let me know if you need any clarification.

Generating HTML from markdown only works with dangerouslySetInnerHTML in React App

I am trying to write a simple markdwon previewer.
the problem is when I insert the Generated HTML text inside a div in render method like this:
render() {
return (
<div>
{this.state.genHTML}
</div>
);
}
it does not rendered, and displays as it written with its tags just like as if a string.
But with dangerouslySetInnerHTML the Generated HTML is got rendered.
I want to know why this occurs?
In general, setting HTML from code is risky(because of cross-site scripting (XSS)), and this is why in React you need to use "dangerouslySetInnerHTML" to set it. This is just a rule that you need to follow if you want to use a React framework.

RTF Format in Web Text Editor

Is there a text editor on the web that supports input from RTF-formatted documents?
I know it is a bit of an odd request for webdev, but I need to read RTF documents from the database and edit them in a web-based text editor and store it back in RTF. Before I invest too heavily in a conversion tool, I thought I would ask if any of the many web text editors supported RTF. My research is showing that they don't.
Additionally, since this is an MVC 4.6 application, would it be a huge effort to write a two-way RTF-HTML conversion tool in C#?
Sample input that would be received by the editor:
"{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard This is some {\b bold} text.\par }"
Quill is a rich text web editor.
Using the code from the quickstart you could enable it like this
Create the toolbar container
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
Create the editor container
<div id="editor">
<div>Hello World!</div>
<div>Some initial <b>bold</b> text</div>
<div><br></div>
</div>
Include the Quill library
<script src="//cdn.quilljs.com/0.20.1/quill.js"></script>
Initialize Quill editor
<script>
var quill = new Quill('#editor');
quill.addModule('toolbar', { container: '#toolbar' });
</script>
Setting the editor text
editor.setText("RTF document ");
Getting the editor text
by default 0 will get everything in the editor
var text = editor.getText(0);
also see this Mozilla post which defines how to implement your own rich text editor.
You could use Word to load the RTF file, then Save As HTML. Works but generates a pile of spurious MS- tags.
Or I've written a program (Visual Studio) that you can have if you want - it's a bit basic, doesn't deal with fonts, but converts most text formatting. Let me know if you're interested (I'd need to tidy it a bit - it's very old - a bit like me).
Though as I write this, I see that Wamadahama may have a better solution.
I also cam to this point and solved it by converting the html to rtf with a npm package.
Like i posted here How to convert HTML to RTF using JavaScript you can use the package created from npm html-to-rtf-browser and bundled to a single file like i describe here
javascript-html-to-rtf-browser
form.onsubmit = function () {
// convert html to rtf
var htmlContent = editorElement.html();
var htmlToRtfLocal = new window.htmlToRtf();
var rtfContent = htmlToRtfLocal.convertHtmlToRtf(htmlContent);
editorElement.html(rtfContent);
return true;
}
Where editorElement is the quill content element/editor as jQuery element
and form is the parent form ( with jQuery $(editorElement).closest('form') ).

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.

Display rich text in ExtJS component

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

Categories