How to render HTML content coming from Model - html

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)

Related

React.js - converting JSX to raw HTML string

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?

Getting HTML as plain text

I am taking HTML as input from a page using Tinymce(Rich Text editor), and saving input to SQL server , While retrieving the data form database and passing it to view ,all html tags and content are showing as plain text.
I am using asp.net core MVC.
This is where you would want to use Html.Raw()
Html.Raw() with render the HTML string you pass to it as markup on the page.

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).

How to stop tinymce converting html tags from database

I can create my content fine using tinymce , it also uploads correctly to the database. here is an example of what stores in the database.
<p>Content goes in here</p>
When I choose to edit this it converts my p tags in the database to <p>
and then wraps the content in another set of p tags.
in source code of tinymce it looks like this
<p><p>this is a test message</p></p>
How do I stop this ?
as I just want it to render exactly as it is in the database.
I want to still store correct html tags in my database but I do not want tinymce to keep stripping/converting them.
Thanks in advance for your help.
Adam
Are you looking for somethink like that
tinymce.init({
...
entity_encoding : "raw"
});
tinymce encode the content before passing it to the server and hence the content is stored as: <p>This is text;/p> but the html tage are still passed like <p><p>This is text;/p></p>
While saving it to the database encode the values so that the html/xml tags are stored encoded. Like; Server.HtmlEncode(_propertyShopAdvertDetails.MarketingInformation);
and similarly while retrieving and displaying in the tinymce control the vaue needs to be decoded;
Server.HtmlDecode(_propertyShopAdvertDetails.MarketingInformation);
while retrieving the content and displaying it in the control, it decodes it and displays it correctly. Since it is displaying the content fine so I believe you have the right class on the control and used the correct mode for the plugin.
Now if you want to display the content in an HTML page and not inside tinymce control the you need to decode it. Something like: #Html.Raw(System.Web.HttpUtility.HtmlDecode(Model.PropertyFullDescription))

HTML tags from Database and display in browser - Play Framework

I'm using Play framework to render my UI for the browser. I have a String field that I want to display in the browser and the value for this String comes from the database. This String field however contains text with HTML formatting as below:
This exam contains questions about core Java initialization, declaration, contro, structures. Questions will be displayed as below:<br><br>public static void main(String args[ ]){<br> int x = 10;<br>}
When I render this in the browser, it does not show properly formatted. Here is what the HTML rendering looks like!
Here is how the HTML looks like in the browser!
Any ideas?
From the documentation on Scala templates:
Escaping
By default, dynamic content parts are escaped according to
the template type’s (e.g. HTML or XML) rules. If you want to output a
raw content fragment, wrap it in the template content type.
For example to output raw HTML:
<p>
#Html(article.content)
</p>