Search code examples
javascripthtmlcsstinymcewysiwyg

Can Tinymce give me some exact HTML content with all styles kept (really means WYSIWYG)?

It's really hard to understand how Tinymce can be considered as WYSIWYG, because I cannot get what I see (visually exactly). So it is more likely "what you see is just what you see".

Currently I use getContent() to get the HTML. But it lacks embedded style and if we show that output html in some container, the visual rendering will look different.

I've tried implementing my own solution to help embed the current style (based on getComputedStyle) to each element. But that's not very efficient (many redundant styles can be included) and not always works (such as for embedded video, I'm not so sure why the <video> is not kept with getContent() and all <video>s disappear in the final output html).

The Tinymce team has done a lot of works, but really not sure why they did not even think about this feature? We need the exact HTML that renders what you see in the editor. We can sanitize the HTML after that by ourselves.

Here is a demo helping you imagine better what's so bothersome with this WYSISWYG editor:

https://jsfiddle.net/L83u5v0n/1/

Clicking on the Show HTML button shows this:

enter image description here

So you can clearly see it's just more likely to be WYSIWYS rather than WYSIWYG. Is there a solution to get the exact output HTML based on some hidden feature of Tinymce that I've not known of? If it's based on some custom script using getComputedStyle then really I do not need it (actually my solution is fairly good).

Solution

  • This is a function of demos that are set up to look good in the editor versus real world usage. The intention of the content_css configuration is to provide the CSS that will be used to render the content.

    If you apply the content CSS elements to the page then "Show HTML" works perfectly.

    https://jsfiddle.net/xzh8utbp/

    Alternatively, delete the content_css configuration (but that won't quite work in your example because JSFiddle adds CSS to the result window).

    Note that I've added mce-content-body to the view div because it turns out our codepen demo CSS leverages it. Normally that wouldn't be required, but then I don't think normal integrations use our codepen CSS.