Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrap CKEditor WYSYWG content with additional (non editable) HTML to apply element specific formatting

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.

like image 285
Danlance Avatar asked May 03 '10 16:05

Danlance


1 Answers

In the end I found that by far the simplest solution to this issue was to use CKEditor inline rather than standalone... this did require substantial changes to the core application and hence may not be suitable for every circumstance - but in the end it does mean that the editor is truly WYSIWYG.

like image 55
Danlance Avatar answered Oct 04 '22 20:10

Danlance