SimpleBox (Creating a Custom Widget) Documentation

This sample demonstrates the Simple Box widget plugin that was created in the Creating a Simple CKEditor 4 Widget tutorial series from the Widget SDK section of the CKEditor 4 Developer's Guide.

The custom widget created in the tutorials lets the users insert a simple box with a title and comment fields into their documents. The widget creates a predefined content structure that is added to the document when the user clicks the dedicated toolbar button available in the editor instance below. The included dialog window lets users both insert a new widget into the editor and modify an existing one and set some basic properties (width, alignment) for it.

<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>

Simple Box is a proof-of-concept plugin that can be downloaded from the repository or created by following the step-by-step tutorial.

Related Features

Get Sample Source Code

Simple box widget

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Simple box widget</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.plugins.addExternal('simplebox', 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/simplebox/', 'plugin.js');

    CKEDITOR.replace('editor1', {

      // Add the Simple Box plugin.
      extraPlugins: 'simplebox',

      // Besides editor's main stylesheet load also simplebox styles.
      // In the usual case they can be added to the main stylesheet.
      contentsCss: [
        'http://cdn.ckeditor.com/4.25.0-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/simplebox/styles/contents.css'
      ],

      // Set height to make more content visible.
      height: 500,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>