Eliminar caracteres y HTML de CKEditor + Laravel Livewire
Hola por aquí te quería mostrar rápidamente una implementación con el CKEditor que estoy haciendo, como te he comentado yo tengo una relación un poco de amor y odio con el CKEditor es un plugin excelente tiene muchas opciones Pero algunas configuraciones se hacen un poco necias o algunas opciones cuando quieres quitar algo ahorita yo tengo o la característica que estoy implementando aquí es en mi web de Academia esto me lo copió un poquito de la gente de packtpub que es esta web que tenemos acá que ellos cuando tú compras un libro aquí tienes también la opción de poder visualizarlo dentro de la web cosa que me parece excelente aquí por ejemplo le doy y aquí verías el html.
El problema que tengo es que el contenido HTMl que me genera el CKEditor al momento de copiar el HTML me genera unos BR, el contenido que estoy copiando no tiene br ni nada raro por el estilo solo esas clases y poco más perfecto no está tan mal por eso es lo que comento entonces, fíjate queé es lo que yo hago un poco a lo burro agarro un trozo claro aquí Debería de agarrar un capítulo pero para este ejemplo da igual agarro un trozo porque CKEditor me corrige un poco el código de igual manera es una prueba vengo aquí a source y copio el código entonces aquí ya lo tengo y doy a guardar aquí guardo el html está un poco corrido porque estoy ahí trabajando en el ccs pero fíjate la diferencia aquí por ejemplo si busco acá aquí arriba por Dios Aquí puedes ver que se ve de la siguiente forma pero fíjate los brincos que tenemos acá Aquí tengo como que un código muerto Por así decirlo un salto de línea si analizamos acá que es lo que tenemos aquí es más fácil vas a ver que es el CKEditor que te agrega esta cosa no sé por qué pero ahí te lo agrega.
Mi implementación para remover HTML que no quiero
No estoy orgullosa de esa de esta implementación pero fue lo que se me ocurrió en base a no tener que estar trasteando con las configuraciones de CKEditor entonces aquí fíjate otra vez Esto es lo que yo hacía por defecto ya enviarlo de una con el submit lo que estoy haciendo aquí es dividirlo Fíjate que por acá arriba si busco el formulario comenté esto no estoy empleando la implementación por defecto sino ahora lo estoy resolviendo localmente fíjate fíjate que aquí simplemente coloqué un formulario aquí le coloqué un identificador y mediante javascript normalito escucho el evento submit y ya por aquí hago lo que es la parte de Livewir qué es lo que hago aquí aquí estoy guardando o estoy obteniendo el contenido Fíjate que también esto tiene un truco porque aquí aparece un br como si fuera poco pero el muy degenerado cuando obtienes aquí el html convierte ese br a ver si lo encuentro en otro en otro tipo de salto de línea Por qué lo hace no tengo ni idea pero así funciona aquí lo puede ver convierte el br a esta cosa que está aquí para bueno para como quien dice fregar la paciencia al pobre desarrollador Por lo hace no sé yo creo que la gente de CKEditor le meta al loco pero eso es lo que está sucediendo aquí entonces.
El problema de modificar el HTML directamente en el ckeditor
Lo que está sucediendo que que el CKEditor lo vuelve a definir no sé por qué hace eso guarda como una especie de espejo y no permite que lo editamos directamente en el editor mediante javascript que era lo que estaba haciendo al inicio estuve como dos horas en esto y no sabía por qué no lo eliminaba y luego que empecé a hacer pruebas desde acá y veía que que si los eliminaba sí los tocaba pero como que se volvían a generar cosa que lo puedo hacer para ver si puedo hacer la prueba por acá rapidito.
Aquí el submit prevent de Livewire es remplazado por un evento de prevención de submit en JS:
<form id="formData">
{{-- <form wire:submit.prevent="sendData"> --}}
<script>
document.querySelector("#formData").addEventListener("submit", function(event) {
event.preventDefault();Luego guardo el HTML en un elemento HTML en donde pueda manipularlo y quito el HTML que no quiero:
<div id="htmlCkeditor" class="hidden"></div>
document.querySelector("#htmlCkeditor").innerHTML = editor.getData()
document.querySelector("#htmlCkeditor").innerHTML.replaceAll('<p> </p>', "")Luego envío el contenido al servidor mediante Livewire:
$wire.submit(document.querySelector("#htmlCkeditor").innerHTML.replaceAll('<p> </p>', ""))Esta parte la sustituyes con la tecnología que estes usando como peticiones con axios o Inertia.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter