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>
?