Excerpt from a ckeditor_templates.js file

ckeditor_templates.js

CKEDITOR.addTemplates( 'default', {
    // The templates definitions.
    templates: [{
        title: "Two Column Section",
        html: '<div class="two-col padded"><div><p>Column One</p></div><div><p>Column Two</p></div></div><p></p>'
    }, {
        title: "Blockquote with Citation Footer",
        html: '<blockquote><p>The <code>blockquote</code> element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p><p>Content inside a <code>blockquote</code> other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.</p><footer><cite><a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-blockquote-element">4.4.4 The blockquote element</a> - W3C Working Group, 2013</cite></footer></blockquote>'
    }, {
        title: "Panel Div",
        html: '<div class="panel fill dialog"><p>Content can be wrapped in containers to create visual groupings, or to draw attention to special notes or messages. The following classes can be edited or added to this container:</p><p>Options: <code>.fill</code> <code>.heavy-top</code> <code>.heavy-left</code> <code>.no-border</code></p><p>Color Accents: <code>.accent-blue-green</code> <code>.accent-blue</code> <code>.accent-purple</code> <code>.accent-gold</code> <code>.accent-green</code> <code>.accent-blue-red</code></p><p>Indenting: <code>.indent1</code> <code>.indent2</code> <code>.indent3</code> <code>.indent4</code></p></div>'
   }, {
       title: "Accordion",
       html: '<div class="expander scripted"><h2 class="sans expander-heading" tabindex="0" aria-expanded="false">Clickable Header</h2><div><p>Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p><p>Curabitur blandit tempus porttitor. Fusce <a href="#">a link which would receive focus</a> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><h4>Heading that Doesn\'t Expand</h4><p>Donec ullamcorper nulla non metus auctor fringilla.</p></div><h2 class="sans expander-heading" tabindex="0" aria-expanded="false">Another Clickable Header</h2><div><p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.</p></div></div>'
   }]
});