--- /dev/null
+<!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>
projects / yaffs-website / blobdiff