| Server IP : 109.234.164.53 / Your IP : 216.73.216.110 Web Server : Apache System : Linux cervelle.o2switch.net 4.18.0-553.32.1.lve.el8.x86_64 #1 SMP Thu Dec 19 13:14:03 UTC 2024 x86_64 User : computer3 ( 1098) PHP Version : 7.1.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/computer3/live-snaps.fr/cp-admin/includes/ckeditor/samples/old/widgetbootstrap/ |
Upload File : |
<!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>