CKEditor Template Menu in CKEditor Widgets 7
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.
Buttons will be added to the menu for each of the plugins that is bundled with CKEditor or added with config.extraPlugins.
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
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}(*);'
} );
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}(*);'
} );
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.
File
plugins/widgettemplatemenu/samples/index.htmlView source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CKEditor Template Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Adds a menu button to CKEditor with Bootstrap templates, media insert, code insert, map insert, and a quotebox" />
<meta name="author" content="albatrossdigital.com" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"></script>
</head>
<body>
<div class="container">
<h1>CKEditor Template Menu</h1>
<p>
Adds a gear menu button to CKEditor to allow authors to easily add and edit templates.
</p>
<p>This plugin requires one or more of the following CKEditor plugins.</p>
<ul>
<li><a href="http://ckeditor.com/addon/widgetcommon">Common Widgets</a></li>
<li><a href="http://ckeditor.com/addon/widgetbootstrap">Bootstrap Widgets</a></li>
<li><a href="http://ckeditor.com/addon/oembed">Media (oEmbed)</a></li>
<li><a href="http://ckeditor.com/addon/leaflet">Leaflet</a></li>
<li><a href="http://ckeditor.com/addon/codesnippet">Code Snippit</a></li>
</ul>
<p>Buttons will be added to the menu for each of the plugins that is bundled with CKEditor or added with config.extraPlugins.</p>
<ul>
<li><strong><a href="http://albatrossdigital.com/node/41">Watch a demo</a></strong></li>
<li><strong><a href="http://albatrossdigital.github.io/widgetcommon">Documentation and live demos</a></strong></li>
</ul>
<h2>Using</h2>
<p>Install the plugin using the standard <a href="http://docs.ckeditor.com/#!/guide/dev_plugins" target="_blank">CKEditor plugin installation instructions</a>.
We recommend manually building your editor on ckeditor.com, or using <a href="https://github.com/albatrossdigital/ckeditor-sandbox" target="_blank">our base editor build</a>, which will include everything you need.</p>
<!--<pre><script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"></script></pre>-->
<ul>
<li><a href="#widgetTemplateMenu">Widget Template Menu</a></li>
<li><a href="#toolbarGroups">Toolbar Groups</a></li>
<!--<li><a href="#customToolbar">Custom Toolbar</a></li>-->
</ul>
<br/><a name="widgetTemplateMenu"></a><h3>Widget Template Menu</h3>
<pre>
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}(*);'
} );
</pre>
<textarea id="editor1" cols="10" rows="10">
<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>
</textarea>
<script>
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}(*);'
} );
</script>
<br/><a name="toolbarGroups"></a><h3>Toolbar Groups</h3>
<pre>
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}(*);'
} );
</pre>
<textarea id="editor2" cols="10" rows="10">
<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>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
extraPlugins: 'image2,widget,widgetcommon',
height: 400,
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' }
],
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}(*);'
} );
</script>
<br/><br/><h2>About the Creators</h2>
<div class="row two-col-left">
<div class="col-md-2 col-sidebar">
<p><a href="http://albatrossdigital.com" title="Albatross Digital" target="_blank"><img alt="Albatross Digital" src="http://albatrossdigital.com/images/logo.png" /></a></p>
</div>
<div class="col-md-10 col-main">
<p><a href="http://albatrossdigital.com" target="_blank">Albatross Digital</a> 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, <a href="http://albatrossdigital.com/projects">have a look at our work</a> or send us a note at <a href="mailto:hello@albatrossdigital.com">hello@albatrossdigital.com</a>.
</div>
</div>
</div>
</body>
</html>