Portal Engine Questions on portal engine and web parts.
Version 7.x > Portal Engine > CKEditor nested styles View modes: 
User avatar
Member
Member
esolutions - 10/9/2013 3:39:33 PM
   
CKEditor nested styles
Hi,
I have a question regarding the editor applying nested styles. I have the following styles configured in the default.js file:
CKEDITOR.stylesSet.add('default',
[{ name: 'Title', element: 'h3' },
{ name: 'Sub-title 1', element: 'h4' },
{ name: 'Sub-title 2', element: 'h5' },
{ name: 'Important Text', element: 'p', attributes: { 'class': 'importantText'} },
{ name: 'Styled Table', element: 'table', attributes: { 'class': 'tableContent'}}]);

The "Important Text" is meant to encompass a whole paragraph and style it in a gray box.

If I add the following text:
This is a title
But this whole section is important so needs to be highlighted including the title.

Then I apply the "Title" style to "This is a title" the source looks as follows:
<h3>
This is a title</h3>
But this whole section is important so needs to be highlighted including the title.


I then highlight the whole block and apply the "Important Text" style to it it ends up like this:
<p class="importantText">
This is a title</p>
<p class="importantText">
But this whole section is important so needs to be highlighted including the title.</p>


I need it to be like this:

<p class="importantText"><h3>
This is a title <br />
But this whole section is important so needs to be highlighted including the title.</h3></p>


Is this because the editor is validating against the document type declaration and therefore stripping out the <h3> tags because technically <h3> can't be nested in <p> tags?

And I noticed that in the Corporate site they have styles like "small" and "del" in the dropdown. How would you apply your own tags like this?

User avatar
Member
Member
kentico_sandroj - 10/9/2013 7:53:53 PM
   
RE:CKEditor nested styles
Hello,

You are correct, this is a limitation of CKEditor due to the HTML rules when it comes to nesting. If you take a look at the example on their site, they have a similar style called marker which uses SPAN tags but also adds them inside of every tag. So your example would look like this:

<h3><span>This is a title</span></h3>
<p><span>But this whole section is important so needs to be highlighted including the title.</span></p>


All of the text would be highlighted and the content could be validated. Would this approach work for you?

Best Regards,
Sandro