This widget lets you create and edit non-editable and optionally previewable placeholder blocks.

You can edit the placeholder block through a simple dialog where you can enter the ID of the block into a text input field. How you use the ID-field is completely up to you. Whatever makes sense for you or rather your application is fine.

Additionally, you can integrate a block browser similar to a file/media browser and select the block through that. Your block browser implementation can pass the id and optionally the content of the selected block. If the content is passed, the selected block will be previewable.

In order to make blocks previewable that are already in the initial content when you load the editor, you have to provide an URL to a block API that will return the content for a requested id.

Block Browser

To enable the block browser option, you need the browser plugin, a browser implementation that uses the browser plugin and have to configure the URL to the browser implementation, p.e.

config.blockBrowser = '/example/url/to/browser';

Your block browser implementation can currently send following keys with the message:

{
    id: ..., // required, the ID of the block,
    content: '...', // optional, the HTML for the preview
}

Block API

To enable the block API option, you just have to configure an URL callback function that will receive the ID of the block and must return the final URL to the block API, p.e.

config.blockApi = function (id) {
    return '/example/url/to/api/' + id ;
};

This widget will then issue a GET request to the final URL. The block API must only return the HTML content for the preview if the block with the requested ID exists.

Technical

When you save the editor content, i.e. on downcast, the resulting placeholder will be a block-element with an id attribute

<block id=""/>

When you load your content into the editor, i.e. on upcast, the block-element will be tranformed to a div-element with a data-block-attribute

<div data-block=""></div>

This widget will add some minimal CSS to the editor to make the placeholder somehow visible. You likely want add more styles to adjust the look to your needs, especially if you make use of the block browser and API options.

Demo

• Classic Editor
• Inline Editor
• Minimalistic Browser

Close Dialog Outside plugin is indented to enhance the "dialog" CKEditor plugin by adding the functionality of closing (cancel) the dialog if clicking anywhere outside of the dialog box.

Installation

1. Make sure you have the "dialog" plugin installed see https://ckeditor.com/cke4/addon/dialog for details.
2. Extract the contents of the file into the "plugins" folder of CKEditor.
3. In the CKEditor configuration file (config.js) add the following code

   config.extraPlugins = 'closedialogoutside';

    

This plugin generates a table of contents.

1. It simply crawls the content for Heading-Tags (<h1>, ... ,<h6>)
2. Creates formated Table of Contents with <p> and margins for indent. (see screenshot 2)
3. generates for each heading id- and name-attributes on h-tag
4. deletes automatically already generated tocs inside the document.

The Plugin uses some code from http://ckeditor.com/forums/CKEditor-3.x/CKEditor-Plugin-Table-Contents. The Plugin is localized in german and english.

## Installation

 1. Download the plugin from here
 
 2. Extract (decompress) the downloaded file into the plugins folder of your CKEditor installation.
    Example: http://example.com/ckeditor/plugins/toc
    
 3. Enable the plugin by using the extraPlugins configuration setting.
    Example: CKEDITOR.config.extraPlugins = "toc";

   Make sure, "div" is included into the format_tags configuration setting.
    Example: CKEDITOR.config.format_tags = 'div';

 4. The "Links"-Toolbar now contains the toc-button

This plugin introduces a unique custom selection system for tables to, for example:

• Select an arbitrary rectangular table fragment - a few cells from different rows, a column (or a few of them) or a row (or multiple rows).

• Apply formatting or add a link to all selected cells at once.

• Cut, copy and paste entire rows or columns.