I'm trying to figure out if this is possible in the editor without resorting to HTML source editing.
I have a CSS style for visually breaking up an article. Typically this is rendered as divider lines bewteen each section of an article. The style also applies a clearfix technique to keep floated images from flowing into other parts of the document. The style is defined in addStyleSet like so:
CKEDITOR.addStylesSet('cgr_styles',
[
{
name: 'Section (div)',
element: 'div',
attributes: {'class' : 'article-section'}
},
{
name: 'Section (section)',
element: 'section',
attributes: {'class' : 'article-section'}
},
]
);
So with the insert DIV button its pretty simple to wrap a bunch of elements (headers, paragraphs) inside a <div> container and set the <div> to use the 'article-section' class. So I might end up with HTML like the following:
<div class="article-section">
<h2>The sub-heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean tincidunt ligula erat, in laoreet turpis tincidunt sit amet.
Praesent lacinia justo ut ante sodales rutrum.
</p>
</div>
However. Most of the time it is sematically better to use a <section> tag (or another block like header or aside). So I think this would be as simple as clicking the <div> element using the tag breadcrumb. E.g. "body div". Then either choosing <section> from the Block list of choosing 'Section (section)' from the Styles list. But instead of changing the <div> to a <section>, it changes all the child elements to a <section> and the original <div> remains untouched.
I can change the <div> tag in source view to a <section> but that is not very user friendly. Can what I explained be achieved using the editor's tools so I end up with the final output looking like:
<section class="article-section">
<h2>The sub-heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean tincidunt ligula erat, in laoreet turpis tincidunt sit amet.
Praesent lacinia justo ut ante sodales rutrum.
</p>
</section>
?
