I am attempting to have the WYSYWG view within CKEDITOR display with the same formatting as it will within the final rendered HTML.
I am currently applying the correct CSS through specifying the contentsCss property when loading CKEditor.
This works fine for some of the formatting, however a lot of the css formatting is applied to elements which will surround the edited HTML within the final rendered page - and so the WYSYWG view is not consistent with the final rendered view.
I would like to be able to specify HTML code at runtime which will wrap the editable HTML content within the CKEditor WYSYWG view - but not have this be part of the editable code, or rendered within the HTML code.
For instance, currently the HTML code surrounding the editable content is:
<body spellcheck="false" class="cke_show_borders">
[Editable Content]
</body>
Where as in one particular instance I would it like it to render like this:
<body spellcheck="false" class="cke_show_borders"><div id="container_everything"><div id="content_container"><div class="introduction_container"><div class="introduction_text">
[Editable Content]
</div></div></div></div></body>
I need to be able to specify different prefix and suffix code blocks at runtime, as specific HTML depends on the context of the element being edited.
Can anyone point me in the right direction?
Thanks.