# CKEditor Bootstrap Widgets

Give your content authors the ability to add responsive layout elements to their pages. CKEditor widgets are provided for common Bootstrap layouts:

- Left sidebar image
- Right sidebar image
- Two columns
- Three columns
- Alert box

Each widget can have its own button, or you can use the Widget Template Menu plugin to create a dropdown menu of templates.

Watch a demo: http://albatrossdigital.com/node/41

## Using

Install the plugin using the standard CKEditor plugin installation instructions. We recommend manually building your editor on ckeditor.com, or using our base editor build, which will include everything you need.

Once you have added the plugin, you can use our Widget Template Menu plugin or the standard Toolbar Groups. For each, you must set extraPlugins and allowedContent.

- Widget Template Menu
- Toolbar Groups

### Widget Template Menu

            CKEDITOR.replace( 'editor1', {
              plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
              extraPlugins: 'widgetbootstrap,widgettemplatemenu',
              height: 400,
              toolbar: [
                [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
                [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
                [ 'Bold' ],
                [ 'WidgetTemplateMenu' ]
              ],
              allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
                'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
                'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
            } );

<div class="row two-col-right"><div class="col-sm-9 col-main"><p>Content</p></div><div class="col-sm-3 col-sidebar"><p><img alt="" src="http://placehold.it/300x250&text=Image" /></p></div></div> <p> </p>

### Toolbar Groups

            CKEDITOR.replace( 'editor2', {
              plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
              extraPlugins: 'image2,widget,widgetbootstrap',
              height: 400,
              toolbarGroups : [
                { name: 'clipboard',   groups: [ 'clipboard', 'undo', 'source' ] },
                { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
                { name: 'links' },
                { name: 'insert' },
                { name: 'about' }
              ],
              allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
                'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
                'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
            } );

<div class="row two-col-right"><div class="col-sm-9 col-main"><p>Content</p></div><div class="col-sm-3 col-sidebar"><p><img alt="" src="http://placehold.it/300x250&text=Image" /></p></div></div> <p> </p>

## About the Creators

Albatross Digital is a small group that builds websites, designs identities and solve problems. We have spent a lot of time and resources thinking about better content authoring experiences and workflows. If you're interested in learning more, have a look at our work or send us a note at hello@albatrossdigital.com.