Geek Answers Handbook

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

I am trying to have a WYSYWG view on a CKEDITOR display with the same formatting as in the final rendered HTML.

I am currently applying the correct CSS by specifying the contentsCss property when loading CKEditor.

This is great for some formatting, however, a lot of css formatting is applied to the elements that will surround the edited HTML on the last page displayed, and therefore the WYSYWG view is not consistent with the final rendered view.

I would like to specify HTML code at runtime that will wrap editable HTML content in the CKEditor WYSYWG view, but should not be part of the editable code or displayed in HTML code.

For example, currently the HTML code surrounding editable content:

<body spellcheck="false" class="cke_show_borders"> [Editable Content] </body>

Where, as in one specific case, I would like it to look 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 blocks of prefix and suffix code at runtime, since the specific HTML depends on the context of the element being edited.

Can someone point me in the right direction?

Thanks.

+6
javascript html css ckeditor
source share
2 answers

As a result, I found that the simplest solution to this problem was to use the built-in CKEditor, and not standalone ... it required significant changes in the main application and, therefore, may not be suitable for any circumstances, but in the end this means that the editor is really WYSIWYG .

+1
source share

I think you need to look at the ProtectedSource.Add method: http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/ProtectedSource.Add

0
source share

More articles:


All Articles