React.js - converting JSX to raw HTML string - html

I am currently thinking about making a CMS project and one of the features I want to add is making a HTML page by clicking on buttons then storing that HTML in a JSON, of course in a string format. The way I want to make this is pretty easy, on a certain button click it adds the JSX element and renders it real time so the user says what he is building. Lets say the user then has to click a button that will save that page to the json. Is there any way I can convert JSX elements to a raw HTML string so I can save it to json or do I manually have to keep on adding to a string when making JSX elements and create the raw HTML myself?

Related

React render pasted html as tags, not string

I have a quick question. I am currently developing a React app with Python on the backend. On the Python side, I parse some html files, and I extract some html tags from them. Then it gets packed into a JSON and sent to the frontend. So React app receives something like this:
{'<b>id</b>': 'Link'}
So those are like raw html tags in form of strings. Now I want to render them. And this happens:
And this is how it looks under dev tools:
So it gets rendered as literal string and what I want is the text on the left side to be bold, and the text on the other side to be an actual hyperlink. Is there a way to do it?
React stops this intentionally. See the docs.
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
You can still accomplish it by using dangerouslySetInnerHTML. Replace the following test div with your variable holding html.
const test = "<div>TEST</div>";
return <div dangerouslySetInnerHTML={{__html: test }} />;

How to render HTML content coming from Model

So, I have a wordpress like website in ASP.Net MVC 5, where I can create website for my customers. Now one of the customer's website needed a text box to add a html content. So, I added [AllowHTML] for that text box, so I am able to successfully save textbox content to DB. Now my question is how to render in front end. I mean I have a model property as
public string htmlcontent {get;set;}
and the value I am getting from Database is
<p>abc</p>.
Now what is the best way to render it in my cshtml file. If I do something like
#Model.htmlcontent
My output is simply <p>abc</p> as Plain TEXT But I want the DOM to understand the html content and attributes and render it accordingly.
You need to tell the razor engine not to escape your string using Html.Raw:
#Html.Raw(Model.htmlcontent)

How to save html content in mongodb via SpringBoot form

I am working on a SpringBoot based MVC application which uses mongoDB to store the data. I am using thymeleaf as the template engine. In one of the scenarios, the user needs to fill a form which is then displayed on some view.
The problem I am facing is that the user can use html tags to format the data while writing in the textArea of the form (code snippets, tabular format etc). But when I am displaying that text, the html is not being parsed and is displayed as is.
For Ex: <b>String</b> should be displayed as String but is being displayed as <b>String</b> only. When I check the source code of the page, the html tags are displayed as encoded i.e. < is showing as &lt ; etc and hence the parsing is not happening.
Can someone please help
You can output unescaped text with th:utext. From the official turorial
If we want Thymeleaf to respect our XHTML tags and not escape them, we will have to use a different attribute: th:utext (for “unescaped text”):
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
The tutorial assumes that home.welcome is a string with html-tags:
home.welcome=Welcome to our <b>fantastic</b> grocery store!.
It goes without saying that this needs very careful validation so that only safe (whatever safe is for the particular use case) HTML is stored into the database (and no possibly malicious code like <script/> tags).

Objective-C: Create UITextViews and UIImageViews from HTML string

So I am fairly new to working with iOS applications and I am currently working on an application which pulls data from a website using NSURLSessionDataTask, parses the JSON response (HTML), and then populates a view with data from the response.
Currently, I am stuck trying to find a solution to correctly parsing my current HTML string (of type __NSCFString/NSString) from the JSON response, and putting the text into one or more UITextViews and images into one or more UIImageViews within the main ViewController.
It has previously been suggested to simply use a UIWebView to display everything or to use an outside library to do some of the converting, however I am curious if there are any methods by which I could parse the HTML and extract all relevant text or images and throw them into an array for later use. I would very much prefer to keep all of this native and not use outside libraries unless absolutely necessary.
I have also seen some use of the NSAttributedString class for parsing HTML from a JSON response, but am unsure if this is even relevant to what I am trying to do here. Any help/suggestions/thoughts are appreciated!
You can use the native NSXMLParser class. Checkout the documentation here.
Within your custom parsing class. You can generate NSAttributedString and store into array based on custom logic. This should help.

My backbone marionette model contains a field with escaped html in it. How do I render that field's contents as HTML and not text?

Classic problem. Want to see html rendered but I'm seeing text in the browser. Whether I tell handlebars js to decode it or not in template ( three curly braces vs two - {{{myHtmlData}}} vs {{myHtmlData}} ) doesn't get me there. Something about the JSON being returned via the model.fetch() has this html data wrapped up in such a way that it is resistant to the notion of displaying as HTML. It's always considered a string whether encoded or decoded so it always displays as text.
Is this just something backbone isn't meant to do?
The technologies involved here are:
backbone.marionette
handlebars.js
.NET Web API
Your data is being escaped automatically. It's a good thing, but since you're sure the data is a safe HTML. Use {{{}}} as in this other question Insert html in a handlebar template without escaping .