Exporta contenido HTML de Google Docs a tu página, claves
Por aquí quiero mostrarte cómo puedes exportar un libro o cualquier documento que tengas aquí en Google Docs a una página html y por supuesto que luego puedas emplear por ejemplo como hago yo en un visor ya que yo export cada uno de mis libros o estoy en eso por aquí por ejemplo estoy en el listado d de libros ya quí este doy a detalle aquí tengo la la parte de visor y el estilo se lo puedo colocar yo Entonces eso sería un poquito las desventaja en base a lo que te voy a mostrar que el estilo lo tienes que proveer tú por lo tanto tienes ahí una tarea quec de manera manual entonces es eso básicamente poder emplear un estilo propio bien para esto aquí tenemos la opción en descarga de página web html comprimido indica aquí 2ué sería lo que puedes ver por aquí esto te va a generar una imagen o el conjunto de imágenes mejor dicho de todo el libro que luego tú tienes que referenciar.
Google Docs provee estilos mediante atributos
Aquí el documento el problema con el documento que es básicamente una página enorme html es que te incluye un montón de clases y estilos sobre todo la parte del font style aquí puedes ver el estilo que yo no quiero heredar a mi sitio porque si no va a romper con el estilo que ya yo tengo cosa que otra vez yo no quiero ya que el estilo sol lo proveo yo y puedes ver un poco más abajo me parece que tengo aquí el atributo de estilo el cual hace un inline blot también a veces hace un font family para indicar si es console la tipografía cualquier otra cosa que yo no quiero porque otra vez todo eso yo lo hago des desde la página.
Quiero quitar el estilo y atributos del Google Doc
Por lo tanto quiero limpiar todo ese estilo bien recuerda aquí que estoy empleando el proyecto de Academia y te voy a mostrar un poco qué es lo que yo hago aquí como yo te he mostrado en otros videos estoy empleando el plugin de sec editor como ya te he mostrado cómo lo puedes instalar en larabel y por aquí tenemos la pestaña de source que es la que pudiéramos emplear para colocar todo el contenido aquí puedes ver el contenido de uno de los libros que en este caso es el libro del arabel el cual simplemente están los p los pre que esto sí lo tengo que hacer yo para formatear el código con la opción que me permite aquí que es de insertar un bloque de código:
order: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 566.93px; height: 316.85px;"><img alt="" src="images/image83.png" style="width: 566.93px; height: 316.85px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c14 c12"><span class="c0"></span></p><p Y también los spam que ahí ya lo también lo heredé lo pudiera eliminar pero lo dejé ahí por lo demás ya con esto puedes ver que ya yo tengo el formato entonces lo que hubiera que hacer sería copiar el contenido ya sea el total o como lo quieras clasificar en mi caso yo lo clasifico por capítulos directamente en esta pestaña pero el problema es otra vez que vas a heredar todo este montón de clases y también estilo que es precisamente lo único que tiene clases y estilos predefinidos aquí directamente en el html cómo hacemos para eliminarlo para esto podemos aprovechar lo que es javascript:
document.querySelectorAll("#htmlCkeditor p, #htmlCkeditor ul, #htmlCkeditor li, #htmlCkeditor img, #htmlCkeditor p, #htmlCkeditor h1, #htmlCkeditor h2, #htmlCkeditor h3, #htmlCkeditor h4, #htmlCkeditor h5, #htmlCkeditor h6, #htmlCkeditor span, #htmlCkeditor a"
)
.forEach(e => {
e.removeAttribute("class")
e.removeAttribute("style")
});Entonces antes de registrar el contenido que es lo que yo estoy haciendo por acá antes de enviar el formulario por aquí Leo el contenido en este caso es importante que repliques el contenido del editor en otro bloque html cosa que estoy haciendo ya que no lo puedes editar directamente o al menos.
Modificar el HTML de CKEditor en un elemento HTML aparte
Para la versión que yo estoy empleando actualmente ya que se lo editas actualmente lo que hace CKEditor es detectar los cambios que lo hiciste mediante javascript y lo reescribe por lo tanto en la práctica no está está haciendo nada entonces yo lo que hago es guardar este contenido html en un di que se encuentra [Música] oculto voy para arriba Aquí está es simplemente un dis oculto y reemplazo el contenido que yo no quiero en este caso sería el de la clase y el estilo pero aquí También aprovecho tal cual veías por acá buen aquí selecciono todo el contenido los p los ul los Li las imágenes Bueno aquí coloqué otra vez p no haría falta los H c1 hasta el h6 los enlaces y el SPAN:
document.querySelector("#htmlCkeditor").innerHTML = editor.getData()Sería el único contenido que yo tengo por ahí entonces si a ti te aparece otra cosa tuvieras que colocarlo aquí pero ya creo que no porque Estos son para los párrafos y las imágenes y simplemente quito todos todas esas clases las clases y los estilos y ya con eso tuviéramos el contenido completamente limpio listo en este caso para enviar al servidor cosa que yo hago aquí con el bueno Esto es con un liveware tal cual te he mostrado también en mi curso y también en YouTube envío el contenido saneado que es lo importante otra vez enviar el contenido saneado hacia donde lo quieras enviar para procesar aquí también aprovecho y quito estos bloques que también me genera caditor que son unos como un br que tampoco lo quiero ya que lo hago yo de manera manual En caso de que sea necesario Y eso sería todo ya con eso tienes el contenido completamente limpio y ya el estilo que lo quieras dar puedes aprovechar a colocarlo por aquí si por ejemplo esto fuera código aquí le coloco el código o le colocas esto lo importante es que estás heredando ahí tu página y el estilo se lo vas a prober tú así que estos son los pasos que puedes realizar si quieres exportar un libro o un documento de Google dot para manejar internamente en tu página.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter