CKEditor Template Menu

Adds a gear menu button to CKEditor to allow authors to easily add and edit templates.

This plugin requires one or more of the following CKEditor plugins.

• Common Widgets
• Bootstrap Widgets
• Media (oEmbed)
• Leaflet
• Code Snippit

Buttons will be added to the menu for each of the plugins that is bundled with CKEditor or added with config.extraPlugins.

• Watch a demo
• Documentation and live demos

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.

• Widget Template Menu
• Toolbar Groups

Widget Template Menu

        CKEDITOR.replace( 'editor1', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
          extraPlugins: 'widgetcommon,widgetbootstrap,oembed,leaflet,codesnippet,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-md-9 col-main"><p>Content</p></div><div class="col-md-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,widgetcommon',
          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-md-9 col-main"><p>Content</p></div><div class="col-md-3 col-sidebar"><p><img alt="" src="http://placehold.it/300x250&text=Image" /></p></div></div> <p> </p>

About the Creators