How can I protect ckeditor change my source code? - javascript

I am making laravel cms system using ckeditor now.
However, ckeditor changes may source code, it means when I copy and paste html to ckeditor in Source code status, after that, I reopen html in Source code status, html is already changed.
Html is as follows;
<section class="page-link">
<div class="container">
<div class="page-link__box">
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#philosophy">
<h4 class="head-h4">aaaa</h4>
</a>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#greeting">
<h4 class="head-h4">bbbb</h4>
</a>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<a href="#aboutcompany">
<h4 class="head-h4">cccc</h4>
</a>
</div>
</div>
</div>
</div>
</section>
And, ckeditor changes it as follows;
<section class="page-link">
<div class="container">
<div class="page-link__box">
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
aaaa
</h4>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
bbbb
</h4>
</div>
</div>
<div class="page-link__box__cont">
<div class="page-link__box__cont__btn">
<h4 class="head-h4">
cccc
</h4>
</div>
</div>
</div>
</div>
</section>
After all, <h4> tag and <a> tag positions are changed with each other;
Please tell me the reason why?
How can I protect ckeditor change my html.

You can not protect your code, CKEditor will always touch HTML, because it's wysiwyg.
But there's something you can do.
Add buttons with the functionality you need.
Disallow Advanced Content Filter:
config.allowedContent = true;
config.extraAllowedContent = 'a h4';
But I would not recommend to use CKEditor for complex HTML-code. It's intended for paragraphs and something simple. You can use Ace editor instead of CKEditor, when working with html and blade templates. And include simple text content, received from CKEditor, to the templates. I think, it's better way.

Related

How to custom dropdown with js inside loop?

I'm making a forum web site(html+Vue3+php+sql), and there have a post system.
Mostly, when we need to custom dropdown object, it always needs to initial the fake dropdown object with js. (or have the other way that IDK)
for example, I'm using the css framework「Tocas-UI」,and I got the some html objects below:
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
And <div class="ts floating dropdown icon button">...</div> can be used js ts('.ts.dropdown:not(.basic)').dropdown(); to make it be a "dropdown" object.
Although it can only be used once to initial every object which have class .ts.dropdown, but I'm using the js framework Vue3, and when I using v-for to render every post (have one fake dropdown object in every post), it's not working on the object which are be created after I call the function .dropdown().
So I was tried to put ts('.ts.dropdown:not(.basic)').dropdown(); into loop, it stupid and also not working.
Here is the code in the v-for loop:
<template v-for="post in posts">
<div class="item">
<div class="ts mini circular image">
<img src="default.png">
</div>
<div class="content">
<div class="header">{{ post.poster.nickname || post.poster.username }}</div>
<div class="middoted meta">
<a>#{{ post.poster.username }}</a>
<div>{{ Init.timeToStatus(post.datetime) }}</div>
</div>
</div>
<div class="actions">
<div class="ts separated secondary icon buttons">
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
</div>
</div>
</div>
</template>
So the question is... How can I make those fake dropdown object be initial with ts('.ts.dropdown:not(.basic)').dropdown(); even have new post be added after page loaded.

Is it possible to read html page content and grab a <div> with specific class?

I am using Nodejs application to read a large web page. The content of this web page are read using REST api call. Once I get the content I am only interested in specific div and everything under that .
I am wondering if there are any nodejs libraries and inbuilt javascript capabilities I can use to make this process seamless.
DOM tree looks like as follows and, I would like to read href Display me. where outermost / parent DIV is with class="three-equal".
<div class="three-equal" data-layout="three-equal">
<div class="cell normal" data-type="normal">
<div class="innerCell">
<p>
<span </span>
</p>
<div class="panel" ">
<div </div>
<div class="panelContent " style="background-color: #ffffff; ">
</div>
</div>
<p>
<span </span>
</p>
<div class="panel " </div>
<div class="panelContent " style="background-color: #ffffff; ">
<p>
<em>
Display me
</em>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would use this DOM traversal / manipulation library.
https://github.com/defunctzombie/dom
Read about it's usage here: https://github.com/defunctzombie/dom/wiki

Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.

How to clear the default template for dropzonejs

As it stands, dropzonejs is generating markup for every file uploaded. I do not want this nor do I want to define a custom template. As it stands, I just listen for various events and perform actions like updating HTML.
When I don't define a template, the typical default markup is generated.
<div class="dz-preview dz-file-preview dz-processing dz-success">
<div class="dz-details">
<div class="dz-filename">
<span data-dz-name>thumbnail2.png</span>
</div>
<div class="dz-size" data-dz-size>
<strong>0.1</strong> MiB
</div>
<img data-dz-thumbnail>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress style=
"width: 100%;"></span>
</div>
<div class="dz-success-mark">
<span>✔</span>
</div>
<div class="dz-error-mark">
<span>✘</span>
</div>
<div class="dz-error-message">
<span data-dz-errormessage></span>
</div>
</div>
I don't want any markup to be generated. I've looked at the addedfile event and that's where it determines if a custom template is defined or generate the default markup. I don't need this.
I could easily just target .dz-preview and display none however I just would prefer if the HTML was never generated.
I've tried setting previewsTemplate: "" and that didn't work.

Bootstrap 3 Collapse events not triggering

I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>

Categories