Bootstrap, from Twitter in CKEditor Widgets 8
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
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}(*);'
} );
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}(*);'
} );
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
js/plugins/widgetbootstrap/samples/index.htmlView source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- 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 Bootstrap Widgets</h1>
<p>
Give your content authors the ability to add responsive layout elements to their pages. CKEditor widgets are provided for common
<a href="http://getbootstrap.com/">Bootstrap</a> layouts:
</p>
<ul>
<li>Left sidebar image</li>
<li>Right sidebar image</li>
<li>Two columns</li>
<li>Three columns</li>
<li>Alert box</li>
</ul>
<p>Each widget can have its own button, or you can use the Widget Template Menu plugin to create a dropdown menu of templates.</p>
<p><strong>Watch a demo: <a href="http://albatrossdigital.com/node/41">http://albatrossdigital.com/node/41</a></strong></p>
<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>-->
<p>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.</p>
<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: '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}(*);'
} );
</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: '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}(*);'
} );
</script>
<br/><a name="toolbarGroups"></a><h3>Toolbar Groups</h3>
<pre>
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}(*);'
} );
</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,widgetbootstrap',
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>