safe option in django templates - html

I am trying to print a html tag in django template using safe option in django templates.
I am using it like below.
{{ message|safe }}
It works fine as long as I have only one tag ,
for example If I have to print below, it works fine.
<div class="message">data</div>
But If I have another tag inside div , it is not generated as raw html, rather it is generated as below.
<div class="message"><img src="/media//uploads/Capture_16.PNG" /></div>
I would like it to be generated as
<div class="message"><img src="/media//uploads/Capture_16.PNG" /></div>
What options do I have to achieve this ?
EDIT
Below is the original message without using safeor any kind of escaping.
<div class="message">data</div>
<div class="message">&lt;img src=&quot;/media//uploads/Capture_16.PNG&quot; /&gt;</div>

Related

Display HTML from Form on a page as HTML instead of HTML Code

I'm creating a node app with mongodb.
I'm using TinyMCE in textareas for input. When I save it to the database and want to show it somewhere on a page, I see the HTML Code (<p>This is a paragraph</p>) instead of the actual rendered HTML.
When I console.log() the item from the ejs file I get this:
<p>Hello</p>
<p>I was here:</p>
<p>Link</p>
But when I look into the source code of the page I see this:
<p>I was here:</p>
<p>Link</p>
Any ideas?
So here is the solution:
In ejs there is the <%- for unescaped values, which I forgot.
https://ejs.co/#docs

How to generate unrendered HTML elements on web page with Angular 2.1.1 like stackoverflow?

What I am trying to do:
I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.
What I know:
I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to &lt and to convert all of my closing tags ( i.e., > ) to &gt, however I am still not sure what the best way to interpolate some variables into the template.
For example, I have this in my template file:
<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>
What I want to see (and be able to copy) in the browser:
<div>This is my title</div>
<div><p>This is my subtitle</p></div>
<div>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Durian</li>
</ul>
</div>
Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.
Instead what I see is:
{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?
For < and > you'll probably need to use &lt and &gt.
For the braces in template expressions you may want to use ngNonBindable directive.
<div ngNonBindable> {{myTitle}} </div>
Use <pre> or <code> for HTML to become rendered verbatim.
<pre ngNonBindable>
<div>{{'{{'}}myTitle{{'}}'}}</div>
<div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
<div>
<ul>
<li>{{'{{'}}item1{{'{{'}}</li>
<li>{{'{{'}}item2{{'{{'}}</li>
<li>{{'{{'}}item3{{'{{'}}</li>
</ul>
</div>
</pre>
You need to escape { and } (for example like shown above)

"language-markup" HTML Syntax Display in Markdown

Trying to submit a blog entry in Markdown. The entry includes a section displaying HTML syntax. However, when I try to include it in the markdown file, the HTML is getting rendered in the page itself.
How do I get it to just display the syntax without rendering?
This is what I'm trying now:
<pre class=" language-markup"><code class=" language-markup">
<p>Blah</p>
</code>
</pre>

Execute blade tags in textarea

I am setting up a simple CMS and I am using a Textarea (Froala to be exact) to render the HTML content of each page that's generated via database. The textarea can display the html with no problems. However, the blade template isn't executing. It's just in plain text. How can I make sure blade executes correctly? I need it mainly for links.
For an example. I have a form element written in blade:
{{ Form::text('name')}}
It should display like so on my page:
<input name="name" type="text">
However, it's just displaying like this:
{{ Form::text('name')}}
EDIT: here is my pages.blade.php file if they may help with figuring it out.
#extends('layouts.main')
#section('main_content')
<section class="mainContent">
<div class="row">
<h1 title="{{ $pages->title }}">{{ $pages->title }}</h1>
{{ $pages->body }}
</div>
</section>
#stop
There is no out-of-the-box way to do that. Blade templates are compiled only from files.
But you can take look at
Flynsarmy/laravel-db-blade-compiler if you want to compile Blade from Eloquent model
or
TerrePorter/StringBladeCompiler if you want to compile Blade from strings.

Angular. html injecting from tinymce

In my admin panel i got tinymce textarea. I want to preview all my changes.
i get html from tinymce
$scope.text_in = tinymce.get('myTextAreaName').getContent();
and it looks like:
<h1 style="text-align: center;">AAA</h1>
<h3 style="text-align: center;">BBB</h3>
I'm using ngSanitize and my element where i want to inject HTML
<div class="new" ng-bind-html="text_in"></div>
Thats looks ok, BUT. I got html markup without inline styles. All other styles from css works fine.
When i inspecting element there are
<h1>AAA</h1>
<h3>BBB</h3>
What am i doing wrong?
According to Angular documentation you can by pass the sanitize.
http://docs.angularjs.org/api/ngSanitize.$sanitize