Remove characters and HTML from CKEditor + Laravel Livewire
Hello I wanted to quickly show you an implementation that Im making with CKEditor As Ive told you I have a bit of a lovehate relationship with CKEditor Its an excellent plugin It has many options But some configurations become a bit silly Some options when you want to remove something are a bit foolish Right now I have or the feature that Im implementing here is on my Academy website I copied this a bit from the people at packtpub which is this website that we have here When you buy a book here you also have the option of being able to view it within the website which I think is excellent Here for example I click on it and here you would see the html
The problem I have is that the HTMl content that CKEditor generates for me when copying the HTML generates some BRs the content that I am copying does not have BR or anything strange like that just those classes and a little more perfect it is not so bad that is why I comment then notice what I do a little bit stupid I grab a piece of course here I should grab a chapter but for this example it does not matter I grab a piece because CKEditor corrects the code a little anyway it is a test I come here to source and copy the code so here I already have it and I save here I save the html it is a little run because I am there working on the ccs but notice the difference here for example if I search here up here for God Here you can see that it looks like this but look at the jumps we have here Here I have like a dead code So to speak a line break if we analyze here what we have here it is easier you will see that it is the CKEditor adds this thing I dont know why but it adds it there
My implementation to remove HTML I dont want
Im not proud of that implementation but it was what I came up with based on not having to mess around with CKEditor settings so here look again This is what I did by default and send it in one go with the submit what Im doing here is splitting it Notice that up here if I look for the form I commented this Im not using the default implementation but now Im solving it locally notice notice that here I simply placed a form here I placed an identifier and through normal javascript I listen to the submit event and now here I do what is the Livewire part what I do here here Im saving or Im getting the content Notice that this also has a trick because here a br appears as if it were not enough but the very degenerate when you get the html here it converts that br to see if I find it in another in another type of line break Why it does this I have no idea but this is how it works here you can see it converts the br to this thing that is here for good for as if to say to wear out the poor developers patience I dont know why they do it I think the people at CKEditor are making him crazy but thats whats happening here then
The problem with modifying HTML directly in the ckeditor
What is happening is that the CKEditor redefines it I dont know why it does that it saves it as a kind of mirror and does not allow us to edit it directly in the editor using javascript which was what I was doing at the beginning I spent about two hours on this and I didnt know why it didnt delete it and then I started to do tests from here and I saw that if I deleted them they did touch them but they were kind of regenerated so I can do that to see if I can do the test here quickly
Here the Livewire submit prevent is replaced by a submit prevention event in JS
<form id="formData">
{{-- <form wire:submit.prevent="sendData"> --}}
<script>
document.querySelector("#formData").addEventListener("submit", function(event) {
event.preventDefault();I then save the HTML into an HTML element where I can manipulate it and remove the HTML I dont want
<div id="htmlCkeditor" class="hidden"></div>
document.querySelector("#htmlCkeditor").innerHTML = editor.getData()
document.querySelector("#htmlCkeditor").innerHTML.replaceAll('<p> </p>', "")Luego envo el contenido al servidor mediante Livewire
$wire.submit(document.querySelector("#htmlCkeditor").innerHTML.replaceAll('<p> </p>', ""))You replace this part with the technology you are using such as requests with Axios or Inertia
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter