CKEditor Bootstrap Widgets

Give your content authors the ability to add responsive layout elements to their pages.

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:

<script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"></script>

Once you have added the plugin, you can use the standard Toolbar Groups, specify a custom toolbar, or use our Widget Template Menu plugin.

Toolbar Groups

        CKEDITOR.replace( 'editor1', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
          extraPlugins: 'image2,widget,widgetbootstrap',
          height: 400,
          contentsCss: [
            '//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css',
          ],
          toolbarGroups : [
              // On the basic preset, clipboard and undo is handled by keyboard.
              // Uncomment the following line to enable them on the toolbar as well.
              { 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' }
          ]
        } );
      

About the Creators

Albatross Digital

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.