I’m working on a website where I use CKEditor to manage content inside a container that’s 960px wide. My frontend design has the content split into two columns using two separate div elements. I style these divs with CSS selectors like div:first-child and div:nth-child(2) to get the layout I want.
The problem is that I want CKEditor to show these two divs by default when someone opens the editor, and I also want them to have the same styling as my frontend design so users can see exactly how it will look.
Is there a way to configure CKEditor to include default HTML structure and apply custom CSS styles that match my frontend? I want the editing experience to mirror what visitors will actually see on the website.
had the same issue with wysiwyg styling. try bodyCss instead of contentsCss - works better for custom layouts. also, see if your css selectors are too specific. ckeditor usually needs !important flags to override default styles.
You can achieve this in two ways. First, utilize contentsCss to load your frontend CSS directly into the editor. This will ensure that your div styling with div:first-child and div:nth-child(2) maintains consistency in the editor. Alternatively, establish a custom template or use startupData to inject your default two-column div structure when the editor initializes. For CKEditor 4, you can define it like this: config.contentsCss = 'path/to/your/frontend.css' and config.startupData = '<div>Column 1</div><div>Column 2</div>'. This approach will provide users with a true WYSIWYG editor that aligns with your 960px container layout.
Interesting setup! Which CKEditor version - 4 or 5? Have you tried the contentsCss config option? Can you share your current editor initialization code? That’d help me suggest the best way to handle your two-column layout.