futurepress / epub.js

Enhanced eBooks in the browser.
http://futurepress.org
Other
6.44k stars 1.11k forks source link

Modify the content of the book before render? #761

Closed otorcatf closed 6 years ago

otorcatf commented 6 years ago

Epub version 0.3

It's possible to modify the content of the book before render it? I'm facing a problem with certain books that use inline style to define the font size, then when I set the font size through the theme method the font size remains the same.

My current approach is trying to remove those inline styles before render the book. Any idea on how to deal with this?

Thanks

fchasen commented 6 years ago

You can listen for the book.spine.serialize hook:

.spine.hooks.serialize.register((output, section) => {
    section.output = output.replace("whale", "kittens");
});
chiemekailo commented 4 years ago

You can listen for the book.spine.serialize hook:

.spine.hooks.serialize.register((output, section) => {
    section.output = output.replace("whale", "kittens");
});

Hello @fchasen. I know this response is long now, but I have issues these DOM updates. The resource url's for css & img files point to the http://localhost:8080/ reference, so they do not load. (I use Ionic 3 for my project).

I have tried the section.output approach and it does not reflect on the DOM. I tried same in rendition.hooks.content using below: const el = contents.document.documentElement; el.innerHTML = updateDOM.innerHTML;

and still no change; but when I try el.innerHTML = 'eldorado';, it successfully shows. So apparently, even though I succeed to change the css & img links to the appropriate file///: paths, it appears that the respective document does not get included.

What Am I doing wrong? Is there another approach to this.?

I use Epubjs version 0.3.85 via npm install, then copied the dist,src,lib & libs folders to my assets/ folder. Thanks

nimmc commented 2 years ago

@chiemekailo I'm facing the same problem that the url for css/image files are not correct. How did you solve this to the correct path? (i'm using the book.spine.hooks.serialize.register)

froggin commented 3 months ago

You can use book.spine.hooks.serialize.register((output, section) => { but I haven't figured out how to get the modified content to show using this. I'm assuming it's outdated/not supported anymore.

froggin commented 3 months ago

epub version 0.3.93, I got changing the content before rendering working this way:

rendition.hooks.render.register((view) => { let html = view.contents.documentElement.innerHTML; const newHTML = getModifiedHTML(html); view.load(newHTML); });

sbatson5 commented 1 month ago

epub version 0.3.93, I got changing the content before rendering working this way:

rendition.hooks.render.register((view) => { let html = view.contents.documentElement.innerHTML; const newHTML = getModifiedHTML(html); view.load(newHTML); });

Can you elaborate on this at all? I tried something similar but don't see my inserted styles reflected. When I call view.load(html) I get spammed with ResizeObserver errors