How to save and show data submitted from texterea editor (tinymce)? - html

I am developing a website which contain a post submission. When I save the data from texterea, I noticed that the data is in html format rather than plain text. So, what is the best way to show the data in an article format? I am using tinymce editor.
I'm using laravel, thus I just simply use
auth()->user()->posts()->create([
'article' => $data['article'],
]);
To call, I use {{$data->article}}. Please noted that, I only specifically show how I save only textera input.
This is my output
Output
This is database
Database image
This is expected ouput, without html tag.
Expected output

Try this:
{ !! $data->article !! }
Blade statements {{ }} are sent to htmlspecialcharacters() to prevent XSS attacks. If you do not want your html to be escaped you have to use this syntax -> {!! !!}
https://laravel.com/docs/8.x/blade#displaying-unescaped-data

You can display html content by many ways in laravel. Here are some examples
Method 1:
#php
echo $data->article;
#endphp
Method 2:
{{ !! $data->article !! }}
Method 3:
{{ !! htmlspecialchars_decode($data->article) !! }}
OR
{{ !! html_entity_decode($data->article) !! }}

Update: Simply use <?php echo $post_data->article;?> will do the job. Can anyone explain the reason?
Output

Related

why laravel-blade adds unwanted curly braces?

I have stored form HTML in the relational database.
If I retrieve HTML content using the below syntax.
{{$content["form_content"]}}
I get
this view.
Instead, if I use
{{!! $content["form_content"] !!}}
I get this view with unwanted curly braces.
Use
{!! $content["form_content"] !!}
If you use {{ }} meaning that you are escaping HTML entities. It prevents Cross-Site Scripting attacks because your input being displayed from your server/database.
If you use
{{!! "<b>some codes</b>" !!}}
then it spits
some codes which is not great idea to be shown for security sake.
I got rid of mine using
<?php echo $string->item; ?>
the ; at the end made all the difference.

Sample code containing expression like {{ $title }} cause blank page in Laravel

I built a blog in Laravel to post some programming tutorials, but I faced a problem; when I have some expression (sample code) like below
#foreach($items as $item)
<div>{{ $item->name }}</div>
#endforeach
or if I have Angular sample code
<div *ngFor="let item of items">{{ item.name }}</div>
the above sample codes cause a blank page,
in the console, there is no error, but in the development tool element tab body tag is empty. look at this link https://coffeequery.com/posts/loop-in-angular I looked everywhere to find a solution but couldn't.
I think the browser trying to evaluate this expression, what should I do to tell the browser to ignore it?
thanks.
The problem is in the following code:
<code><div *ngFor="let item of items">#{{item.name}}</div></code>
Your Vue.js instance tries to evaluate the curly brackets and silently throws an error, which results in displaying empty #app element. I suggest using v-text attribute instead:
<code v-text="'<div *ngFor="let item of items">{{item.name}}</div>'"></code>

Twig escaping HTML and rendering as raw

I hope someone can assist me on this issue.
I am pulling details from a database to display on a twig template (using Symfony2) but the way in which it is saved in the db makes it difficult to interpret the HTML.
Basically, the HTML tags are already translated as entities in the table, e.g.:
<p>Bach Flower Crab Apple Remedy:&nbsp;the "cleansing" Remedy can be used both internally and externally&nbsp;</p><p><strong>
And so on. I have researched the rendering options in twig and tried the following (based on me rendering a loop of product descriptions):
{% set strategy = 'html' %}
{% autoescape 'html' %}
{{ product.description|escape('html')|raw }}
{% endautoescape %}
and also just:
{{ product.description|raw }}
The first method just echoes the existing content (as entities) and the second method just renders the HTML tags to the page as follows:
<p>Bach Flower Crab Apple Remedy: the "cleansing" Remedy can be used both internally and externally.</p><p><strong>...
So, as you can see, I cannot find a way to actually interpret the HTML tags in order to display the description as it should be.
Is there a way to do this? I can't do it in the PHP as all it's doing is sending an object to the template which is looped through:
public function showAction(Request $request, $store_id=0)
{
$max = 1000;
$repository = $this->getDoctrine()->getRepository('AppBundle:Product');
$products = $repository->getProductsByStoreId($store_id,$max);
$paginator = $this->get('knp_paginator');
$pagination = $paginator->paginate(
$products,
$request->query->get('page', 1),
20
);
$return['products'] = $pagination;
$return['categories'] = $this->getCategories();
return $this->render('AppBundle:tables:productstable.html.twig', $return);
}
Your core issue is that you do not have HTML in your database to begin with. At best Twig could be outputting some HTML entities, which will render visibly as "<p>...", and at "worst" Twig will escape the text to render it accurately as it actually is, which is "<p>...". Expecting Twig to output actual HTML which will render a paragraph is unrealistic, since that's not what your original data contains at all.
You'll have to HTML-decode that text in PHP first, and then output it in Twig with ..|raw. raw means that Twig will output it as is without further escaping it. Since it's nonsense to get the data from the database to then html_entity_decode it, you need to fix your data input here! Don't HTML encode data which is going into the database, it serves no purpose.
I think you have to write custom escaper plugin to decode html entities and use it like this:
{{ product.description|myawesomehtmlentitiesdecoder|raw }}
http://twig.sensiolabs.org/doc/filters/escape.html#custom-escapers for reference.
But generally, it's better to store HTML in database and then apply needed security filters on output.

jinja2 template char limit

in {{blog.content}} I want to limit the viewer to see only 50 char at most, how can I do that using jinja2?
After searching through their documentation I have found that {{ s|autolink[ length[ nofollow]] }} has a length property but it will make it auto link! Which I don't want it to be.
Have you tried the python slice notation?
{{ blog.content[:50] }}
The documentation for jinja2 says to use {{ blog.content|truncate(50) }}. Thats what I have been using thus far.
You can find the docs for template here.
It's works for me:
{{article.content|safe|truncatechars:50}}
use this -> truncatechars:XX <- type here
See DOC is here

Liquid turn string into url link

I have the following code in a liquid template:
{{ sample.url }}
Coming from jinja2 I was hoping for something like this:
{{ sample.url|urlize }}
Does this exist in liquid?
I've seen the liquid documentation and couldnt find any reference to that, but as the documentation sayed you can write your own filter to do that.
Take a look here.