Export HTML content from Google Docs to your page, keys
Here I want to show you how you can export a book or any document that you have here in Google Docs to an html page and of course you can then use it for example as I do in a viewer since I export each of my books or I'm in that here for example I am in the list of books and here I give it in detail here I have the viewer part and I can set the style myself So that would be a bit of a disadvantage based on what I'm going to show you that you have to provide the style therefore you have a task there that c manually so it is basically being able to use your own style well for this here we have the option to download compressed html web page indicate here what would be what you can see here this will generate an image or the set of images rather of the entire book that you then have to reference.
Google Docs provides styles through attributes
Here the document, the problem with the document which is basically a huge html page is that it includes a ton of classes and styles, especially the font style part, here you can see the style that I don't want to inherit to my site because if not it will break with the style that I already have, which again I don't want since I provide the style myself and you can see a little further down it seems that I have here the style attribute which does an inline blot also sometimes it does a font family to indicate if the font is console or anything else that I don't want because again I do all of that from the page.
I want to remove the style and attributes from the Google Doc
So I want to clean up all that style well remember here that I'm using the Academy project and I'm going to show you a little bit of what I do here as I've shown you in other videos I'm using the sec editor plugin as I've already shown you how you can install it in larabel and over here we have the source tab which is the one we could use to place all the content here you can see the content of one of the books which in this case is the book of larabel which simply has the p's and the pre's that I do have to do to format the code with the option that it allows me here which is to insert a code block:
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 And also the spam that I already inherited there, I could delete it but I left it there. For the rest, with this you can see that I already have the format, so what you would have to do would be to copy the content, whether it is the total or however you want to classify it. In my case, I classify it by chapters directly in this tab, but the problem is again that you are going to inherit all this bunch of classes and also style, which is precisely the only thing that has predefined classes and styles here, directly in the HTML. How do we delete it? For this we can take advantage of what is 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")
});So before registering the content, which is what I'm doing here, before sending the form here, I read the content. In this case, it's important that you replicate the content of the editor in another html block, which is what I'm doing since you can't edit it directly, or at least.
Modify CKEditor HTML in a separate HTML element
For the version I am currently using since you are currently editing it, what CKEditor does is detect the changes you made using javascript and rewrites it, so in practice it is not doing anything, so what I do is save this html content in a hidden [Music] directory, I go up. Here it is, it is simply a hidden directory and I replace the content that I do not want, in this case it would be the class and the style, but here I also take advantage of what you saw here, well here I select all the content, the p, the ul, the Li, the images. Well here I placed p again, the H c1 to h6, the links and the SPAN would not be necessary:
document.querySelector("#htmlCkeditor").innerHTML = editor.getData()It would be the only content that I have out there, so if something else appears to you, you would have to place it here, but I don't think so because these are for the paragraphs and the images and I simply remove all those classes, the classes and the styles and with that we would have the content completely clean, ready in this case to send to the server, which I do here with the good one. This is with a liveware just as I have also shown you in my course and also on YouTube I send the sanitized content, which is the important thing, again send the sanitized content to where you want to send it to process. Here I also take advantage and remove these blocks that caditor also generates for me, which are like a br that I also don't want since I do it manually. In case it is necessary. And that would be all. With that, you have the content completely clean and now you can take advantage of the style that you want to give it and place it here. If for example this were code, here I place the code or you place this, the important thing is that you are inheriting your page there and you are going to test the style yourself, so these are the steps that you can take if you want to export a book or a Google dot doc to manage internally on your page.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter