Contribute to this guideReport an issue

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.

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.24.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.24.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.24.0-lts/full-all/contents.css',
            'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/plugins/simplebox/styles/contents.css'
          ],
    
          // Set height to make more content visible.
          height: 500,
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>