Hie guys!
While editing content in the WYSIWYG editor, we formatted it with proper spacing. However, the published page does not reflect the same structure as seen during editing. We’ve attached a screenshot and for reference.
@Ismail This is an issue we experience as well. As I understand it, the TinyMCE editor (WYSIWYG editor) is not connected to your website’s styling by default, so what you see in the editor is not what it will look like on the front end. There are different methods for bringing in the CSS styling into the editor to make it display more like it will on the front end (see TinyMCE CSS and custom styles for more info). For us, we have our own specific CSS file for the WYSIWYG editor that is imported into the tiny_mce_config.jsp file. Unfortunately, it isn’t connected to our main SCSS styling (tinyMCE only supports CSS as I understand), so it is easy for things to get out of sync and have to take time to remember to make the same changes in the WYSIWYG CSS. That is about the extent of what I can say, so I will leave it up to others to fill in the gaps.
2 Likes
We have a good answer here - you can define a property in your tinymce wysiwyg config called content_css, e.g. content_css: "/application/wysiwyg/wysiwyg.css". You can use this to import custom CSS to format the content in the WYSIWYG. There is nothing stoping you from calling an external CSS or dotsass file in that property, e.g.
content_css: "/application/themes/travel/css/styles.dotsass"
To give you an idea, you can check out some custom WYSIWYG configurations on our demo site under:
/application/wysiwyg/*
2 Likes
Clearly the above answers are the correct Best Practices.
So these types of discussions are more valuable as a knowledge base, I will add that there is one more way you could do this - a [custom field schema type] would allow for js injection of css that would override. I wouldn’t suggest this as the best option, or even really a good option, but it should allow for you to use SCSS or some other automated system so you don’t have to keep updating the content_css ‘manually’.
It would give some extra flexibility at the cost of complexity. This would have to be done per content type, but that could be a good thing under the right circumstances.
2 Likes