View source
<!DOCTYPE html>
<html>
<head>
<title>Tutorial — Simple Box Widget, part 2</title>
<meta charset="utf-8">
<script src="../../../../ckeditor.js"></script>
</head>
<body>
<h1 class="samples">
Tutorial — Simple Box Widget, part 2
</h1>
<textarea id="editor1" cols="10" rows="10">
<h1>Simple Box Sample</h1>
<div class="simplebox align-right" style="width: 50%">
<h2 class="simplebox-title">Title</h2>
<div class="simplebox-content">
<p>Foo <strong>bar</strong>.</p>
<ul>
<li>Foo!</li>
<li>Bar!</li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
<p>Pellentesque vitae eleifend nisl, non accumsan tellus. Maecenas nec libero non tellus tincidunt mollis porttitor sed arcu. Donec ultricies nulla vitae eros lacinia, vel congue sem auctor. Vivamus convallis, urna ac tincidunt malesuada, lectus erat convallis metus, a hendrerit massa augue accumsan magna. Nulla mattis tellus elit, nec congue magna scelerisque eget. Aliquam posuere nisi augue, posuere sodales nisi iaculis eu. Donec fermentum urna id nibh sagittis fermentum sit amet sed enim. Aliquam neque elit, pretium elementum nunc a, faucibus accumsan lorem. Etiam pulvinar odio et hendrerit tincidunt. Suspendisse tempus eros lacus, in convallis velit mollis ut. Aenean congue, justo eleifend ultricies malesuada, nunc nunc molestie mauris, eget placerat libero eros vel nisi. Quisque diam arcu, mollis ac laoreet vitae, varius et sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in vehicula sapien. Nunc feugiat porta elit nec volutpat.</p>
<div class="simplebox align-center" style="width: 750px">
<h2 class="simplebox-title">Title</h2>
<div class="simplebox-content">
<p>Foo <strong>bar</strong>.</p>
<ul>
<li>Foo!</li>
<li>Bar!</li>
</ul>
</div>
</div>
<p>Ut eget ipsum a sapien porta ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mi lacus, pharetra eu bibendum blandit, tristique sit amet leo. Integer eu nulla nec magna vulputate blandit. Praesent mattis quis ante eget adipiscing. Nulla vel tempus risus, in placerat velit. Mauris sed nibh at elit posuere laoreet. Morbi non sapien sed nunc fringilla imperdiet.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
extraPlugins: 'autosave,lineutils,image2,widget,leaflet,widgetfoundation,fontawesome,codesnippet', //,autogrow
contentsCss: [
'//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css',
'../../../../contents.css',
'../contents.css',
'//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css',
],
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: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
],
toolbar: [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Bold', 'WidgetFoundation' ]
],
} );
</script>
</body>
</html>
