I find it puzzling how Tinymce is labeled as a WYSIWYG editor when what I see visually is not exactly what I get when I retrieve the HTML using getContent(). It seems more like "what you see is just what you see."
Currently, when I use getContent() to get the HTML, it lacks embedded styles. If I display this output HTML in a container, the visual rendering will appear different.
I attempted to create my own solution to incorporate the current styles (using getComputedStyle) to each element. However, this approach is not very efficient as it includes many redundant styles and does not always work (for example, <video> elements disappear from the final output HTML).
The Tinymce team has put in a lot of effort, but I'm puzzled why they have not considered this crucial feature. It's essential to have the exact HTML that mirrors what is seen in the editor. We can then sanitize the HTML as needed.
Check out a demo that better illustrates the limitations with this WYSIWYG editor:
https://jsfiddle.net/L83u5v0n/1/
When you click on the Show HTML button, you'll see this:
https://i.sstatic.net/JTgWu.png
It's evident that it is more like WYSIWYS rather than WYSIWYG. Is there a solution to obtain the exact output HTML based on some hidden feature of Tinymce that I'm unaware of? If it involves a custom script using getComputedStyle, I don't really need it (as my current solution is quite effective).