www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/ckeditor_widgets/js/plugins/widgetbootstrap/samples/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3
   4   <head>
   5     <meta charset="utf-8" />
   6     <title>Bootstrap, from Twitter</title>
   7     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   8     <meta name="description" content="" />
   9     <meta name="author" content="" />
  10     <!-- Le styles -->
  11     <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  12     <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  13     <style>
  14       body {
  15         padding-top: 60px;
  16       }
  17       @media (max-width: 979px) {
  18
  19         /* Remove any padding from the body */
  20         body {
  21           padding-top: 0;
  22         }
  23       }
  24     </style>
  25     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  26     <!--[if lt IE 9]>
  27       <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  28     <![endif]-->
  29     <!-- Le fav and touch icons -->
  30     <link rel="shortcut icon" href="images/favicon.ico" />
  31     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
  32     <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
  33     <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
  34     <!-- Le javascript
  35     ================================================== -->
  36     <script data-require="jquery" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  37     <script data-require="bootstrap" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  38     <script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"></script>
  39   </head>
  40
  41   <body>
  42     <div class="container">
  43       <h1>CKEditor Bootstrap Widgets</h1>
  44       <p>
  45         Give your content authors the ability to add responsive layout elements to their pages.  CKEditor widgets are provided for common
  46         <a href="http://getbootstrap.com/">Bootstrap</a> layouts:
  47       </p>
  48       <ul>
  49         <li>Left sidebar image</li>
  50         <li>Right sidebar image</li>
  51         <li>Two columns</li>
  52         <li>Three columns</li>
  53         <li>Alert box</li>
  54       </ul>
  55       <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>
  56       <p><strong>Watch a demo: <a href="http://albatrossdigital.com/node/41">http://albatrossdigital.com/node/41</a></strong></p>
  57
  58       <h2>Using</h2>
  59       <p>Install the plugin using the standard <a href="http://docs.ckeditor.com/#!/guide/dev_plugins" target="_blank">CKEditor plugin installation instructions</a>.
  60       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>
  61       <!--<pre>&lt;script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"&gt;&lt;/script&gt;</pre>-->
  62       <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>
  63       <ul>
  64         <li><a href="#widgetTemplateMenu">Widget Template Menu</a></li>
  65         <li><a href="#toolbarGroups">Toolbar Groups</a></li>
  66         <!--<li><a href="#customToolbar">Custom Toolbar</a></li>-->
  67       </ul>
  68
  69       <br/><a name="widgetTemplateMenu"></a><h3>Widget Template Menu</h3>
  70
  71       <pre>
  72         CKEDITOR.replace( 'editor1', {
  73           plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
  74           extraPlugins: 'widgetbootstrap,widgettemplatemenu',
  75           height: 400,
  76           toolbar: [
  77             [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
  78             [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
  79             [ 'Bold' ],
  80             [ 'WidgetTemplateMenu' ]
  81           ],
  82           allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
  83             '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,' +
  84             'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
  85         } );
  86       </pre>
  87
  88       <textarea id="editor1" cols="10" rows="10">
  89         <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&amp;text=Image" /></p></div></div>
  90         <p>&nbsp;</p>
  91       </textarea>
  92
  93       <script>
  94
  95         CKEDITOR.replace( 'editor1', {
  96           plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
  97           extraPlugins: 'widgetbootstrap,widgettemplatemenu',
  98           height: 400,
  99           toolbar: [
 100             [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
 101             [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
 102             [ 'Bold' ],
 103             [ 'WidgetTemplateMenu' ]
 104           ],
 105           allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
 106             '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,' +
 107             'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
 108         } );
 109
 110       </script>
 111
 112
 113       <br/><a name="toolbarGroups"></a><h3>Toolbar Groups</h3>
 114       <pre>
 115         CKEDITOR.replace( 'editor2', {
 116           plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
 117           extraPlugins: 'image2,widget,widgetbootstrap',
 118           height: 400,
 119           toolbarGroups : [
 120             { name: 'clipboard',   groups: [ 'clipboard', 'undo', 'source' ] },
 121             { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
 122             { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
 123             { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
 124             { name: 'links' },
 125             { name: 'insert' },
 126             { name: 'about' }
 127           ],
 128           allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
 129             '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,' +
 130             'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
 131         } );
 132       </pre>
 133
 134       <textarea id="editor2" cols="10" rows="10">
 135         <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&amp;text=Image" /></p></div></div>
 136         <p>&nbsp;</p>
 137       </textarea>
 138
 139       <script>
 140
 141         CKEDITOR.replace( 'editor2', {
 142           plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
 143           extraPlugins: 'image2,widget,widgetbootstrap',
 144           height: 400,
 145           toolbarGroups : [
 146               // On the basic preset, clipboard and undo is handled by keyboard.
 147               // Uncomment the following line to enable them on the toolbar as well.
 148               { name: 'clipboard',   groups: [ 'clipboard', 'undo', 'source' ] },
 149               { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
 150               { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
 151               { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
 152               { name: 'links' },
 153               { name: 'insert' },
 154               { name: 'about' }
 155           ],
 156           allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
 157             '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,' +
 158             'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
 159         } );
 160
 161       </script>
 162
 163       <br/><br/><h2>About the Creators</h2>
 164       <div class="row two-col-left">
 165         <div class="col-md-2 col-sidebar">
 166           <p><a href="http://albatrossdigital.com" title="Albatross Digital" target="_blank"><img alt="Albatross Digital" src="http://albatrossdigital.com/images/logo.png" /></a></p>
 167         </div>
 168
 169         <div class="col-md-10 col-main">
 170           <p><a href="http://albatrossdigital.com" target="_blank">Albatross Digital</a> is a small group that builds websites, designs identities and solve problems.
 171           We have spent a lot of time and resources thinking about better content authoring experiences and workflows.  If you're interested in learning
 172           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>.
 173         </div>
 174       </div>
 175     </div>
 176
 177   </body>
 178
 179 </html>