need help getting rid of javascript commands in ckeditor - security

I am currently working on a small project to create a simple social media web app and i am using Laravel. I used CK editor to make the posts in my media , but i found out that,I can use Javascript commands from the editor by going to the source code section.
How can i make it so that the commands don't run but also at the same time have a option to have bold, italic and different fonts and headers.
The following is my code for posting the posts or text;
*<div class="flex justify-center">
<div class="w-9/12 p-3 bg-stale-700 " >
#if ($posts->count())
#foreach ($posts as $post)
<div class="mb-4 p-4 bg-gray-300 rounded " >
<a href="" class="font-bold" > {{$post->user->username}} </a>
<span class=" p-3 text-sm"> {{$post->created_at->toTimeString()}} </span>
{!!$post->body!!}
</div>
#endforeach
{{ $posts->links('pagination::tailwind') }}
#else
There are no posts
#endif
<div>*
The following is the code for ckeditor:
*<form action="{{route('post')}}" method="post" >
#csrf
<textarea name="post"></textarea>
<script>
CKEDITOR.replace( 'post' );
</script>
#error('post')
<p class=" small-text red-200 "> This feild is required </p>
#enderror
<br>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"> post </button>
</form>*
If possible, I am looking for editor like stackoverflow has,
Thank you

Related

isotope.js and jquery for a grid gallery are not sorting based on image tags

You can see my site here: http://heather-dannyelle.com/macarons.html under 'Gallery'. The images should both be snugly stacked instead of with gaps and they should sort when you click on the tabs at the top. Here's the theme page I bought it from to see the difference: https://www.midmich.edu/connections-website/pages/page-portfolio.html
Other than updating the html with my own images and pages, I have not changed the original code. I haven't changed the js script.
I installed it with the instructions found here using npm:
npm install jquery
npm install isotope-layout
Here's some of my code:
<div class="menu mb-2">
<div class="item active" data-filter="*">all</div>
<div class="item" data-filter=".collection">collection</div>
<div class="item" data-filter=".videos">videos</div>
<div class="item" data-filter=".towers">towers & cakes</div>
<div class="item" data-filter=".seasonal">seasonal</div>
</div>
<div class="row no-gutters sortable-container sortable-container-gutter-fix" data-zanim-timeline="{}" data-zanim-trigger="scroll">
<div class="col-6 col-md-3 sortable-item p-2 seasonal">
<div class="hoverbox rounded overflow-hidden" data-zanim-xs='{"animation":"zoom-in"}'>
<img class="w-100" src="assets/img/lost.macarons/select/gallery/seasonal/orange_trees2.JPG" alt="" />
<div class="hoverbox-content bg-dark d-flex align-items-center justify-content-center text-center">
<div class="px-4">
<h5 class="text-white">cranberry marmalade with orange french buttercream</h5>
<!-- <a class="btn btn-outline-light btn-xs mt-3" href="page-casestudy.html">learn more</a> -->
</div>
</div>
</div>
</div>
here's the gulpfile (unchanged from download):
DEPENDENCIES: {
jquery: {
FROM: 'node_modules/jquery/dist/jquery.min.js',
TO: JS,
},
...
FROM: 'node_modules/isotope-layout/dist/isotope.pkgd.min.js',
TO: lib,
},
I've checked these directory locations and they seem still correct in my file system. I followed the directions here multiple times and still nothing changes. I really can't see where the problem is.
Any help would be so appreciated! I've been trying troubleshoot this on my own for over a month and nothing doing!
Verify that this is the correct package before you install it but based on the name and what it does I think this is the correct name for the package you want.
npm install isotope-layout
which I got from here.

How to find if there is an element in a div?

I have a list of posts and some of them has reactions, some not. I want to extract the number of reactions of each posts and the problem is that those who doesn't have, there is no HTML code.
I tried to debug using print.
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")))
-----
Output: 4 - This is good, because I have 4 divs
print(len(driver.find_elements_by_xpath("//span[#class='v-align-middle social-details-social-counts__reactions-count']"))
----
Output:2 - This is good, because I have 2 posts that got reactions
When I tried to find if a posts got reactions,
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath("//span[#class='v-align-middle social-details-social-counts__reactions-count']")))
----
Output: 2 - Why? Because the second div is empty...
HTML CODE
<div class="occludable-update ember-view">
<ul class="social-details-social-counts ">
<li class="social-details-social-counts__reactions social-details-social-counts__item ">
<button class="social-details-social-counts__count-valuet " aria-label="1 Reaction’ post" type="button">
<img class="reactions-icon social-detail">
<span aria-hidden="true" class="v-align-middle social-details-social-counts__reactions-count">3</span>
</button>
</li></ul>
</div>
<div class="occludable-update ember-view"> this div has no reaction </div>
<div class="occludable-update ember-view"> this div has no reaction </div>
<div class="occludable-update ember-view">
<ul class="social-details-social-counts ">
<li class="social-details-social-counts__reactions social-details-social-counts__item ">
<button class="social-details-social-counts__count-valuet " aria-label="1 Reaction’ post" type="button">
<img class="reactions-icon social-detail">
<span aria-hidden="true" class="v-align-middle social-details-social-counts__reactions-count">3</span>
</button>
</li></ul>
</div>
to locate the continuation element, use .
try below :
driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath(".//descendant::span[#class='v-align-middle social-details-social-counts__reactions-count']")
I found the problem. After better documenting myself, I found out that for sub-elements is used .// instead of //
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath(".//span[#class='v-align-middle social-details-social-counts__reactions-count']")))

image get upload successfully in folder. it is not displayed immediately when that page renders

when I am uploading a new image its not displaying and giving 404 error. all previous upload image is displaying. it is not displaying immediately. when I off server then restart it display that.
I am using angular as frontend and node express setup at backend using multer for uploading images and mongodb as db
I have checked all paths its all good
I error its showing image as 404 not found and type image is text/html
<div>
<div class="row">
<div class="col sm" *ngFor="let post of usersdata.post">
<div class="card" style="width: 310px">
<img class="card-img-top" src="{{'../../../assets/img/Uploads/UserPosts/'+post.postUrl}}" height="250"alt="Card image">
<div class="card-body">
<img class="ui avatar image" src="{{'../../../assets/img/Uploads/Profile image/'+usersdata.img}}">
<span class="card-title"> <b>{{usersdata.name}}</b> </span>
<br><br><p class="card-text">{{post.caption}}</p>
<hr/>
<div class="ui labeled button" tabindex="0">
<div (click)="toggle()" [ngClass]="buttn">
<i class="far fa-heart"></i> Like
</div>
<a class="ui basic red left pointing label">
{{like}}
</a>
</div>
<div class="ui labeled button" tabindex="0">
<div (click)="toggle2()" [ngClass]="buttn2">
<i class="fas fa-heart-broken"></i> DisLike
</div>
<a class="ui basic left pointing black label">
{{dislike}}
</a>
</div><br><br>
<button class="ui right floated basic black button"> <i class="far fa-comment fa-2x "></i></button>
</div>
</div>
</div>
</div>
</div>
It might be an issue while creating your URL for rendering the Image because the error you have is 404 which means the resource you are looking for with the HTTP request is not present. you can check the URL of your other images which are getting rendered and match with the failed one(with necessary changes).

How to show a message if there are no products inside a category with exp:resso store plugin?

I'm using the latest version of EE2 and a plugin called Exp:resso store.
I have products assigned to a category and for the most part all of this is working fine. Below is my code:
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
I'm trying to find a way to show a No products exist message if the category doesn't have anything inside of it. I've tried using {count}, {total_results} & {total_rows} to check if there aren't any products. Problem is everything I try is obviously wrong because nothing gets output :/
Thanks in advance
The store search tag is a wrapper for the channel entries tag pair so you would need to use the {if no_results} tag pair.
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{if no_results}
There are no products
{/if}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
Should also be mentioned if you are not creating a form for the to add the products to the cart you could use the {store_field_short_name:price} variable to reduce the number of queries on your page. Most store things such as sku, weight, measurements can all be access by using the field short name followed by :variable

how can I show car's details When click on their names

I am making a website with node.js and I am new ,I want to learn a method if there is.I list cars using ul and when I click on a car name i want to show car's details. How can I do it.
html
<template name="vehicles">
<section id="vehicles" class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
</div>
<!-- Vehicle nav start -->
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<ul class="vehicle-nav">
{{#each showcarnames}}
<li class="active">{{aracmarka}}<span class="active"> </span></li>
{{/each}}
</ul>
</div>
<div class="vehicle-nav-control">
<a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
<!-- Vehicle nav end -->
<!-- Vehicle 1 data start -->
<div class="vehicle-data" id="vehicle-1">
<div class="col-md-6 wow fadeIn" data-wow-offset="100">
<div class="vehicle-img">
<img class="img-responsive" src="img/vehicle1.jpg" alt="Vehicle">
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">$ 37.40 <span class="info">rent per day</span></div>
<table class="table vehicle-features">
<tr>
<td>Marka</td>
<td>{{carmark}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{carmodel}}</td>
</tr>
</table>
<span class="glyphicon glyphicon-calendar"></span> Reserve now
</div>
</div>
js
Template.vehicles.helpers({
showcarnames: function() {
return cars.find();
}
});
I would approach this problem using Session. You could target the data using a click event:
Template.vehicles.events({
'click .vehicle-nav li': function(){
Session.set('selected-vehicle', this._id); // or however you id the docs in your app.
}
});
then create an event helper that gets the selected doc and returns it to the template.
Template.vehicles.helpers({
getSelectedVehicle: function() {
var selectedId = Session.get('selected-vehicle');
return cars.findOne(selectedId);
},
});
Session is a great and simple tool to manage user state, like what vehicle they have selected.
Finally, you would then need to get the values in your template somewhere
<!-- html-->
{{#if getSelectedVehicle}}
{{#with getSelectedVehicle}}
<!-- mark up, when using with you can access doc atts directly. -->
{{/with}}
{{else}}
<!-- tell the user to make a selection -->
{{/if}}
using with in this context can lead to more readable markup. But there are other ways to achieve the same result.
To recap, at a high level, You are targeting the users interactions with the UI, to set a global variable as a way to simplify managing state. Be sure to check out Session in the meteor docs, its very simple and powerful. (the above code is not tested, but hopefully conveys the idea)

Resources