Skip to content

Latest commit

 

History

History
72 lines (44 loc) · 4.33 KB

README.md

File metadata and controls

72 lines (44 loc) · 4.33 KB
Raw
category order url menu-title meta-title-short
working-with-document
70
features/magicline
Magic Line
Magic Line

Magic Line

This feature is provided through the Magic Line plugin that is included in the Standard and Full presets available from the official CKEditor 4 Download site. You can also {@link guide/dev/plugins/README add it to your custom build} with online builder.

Depending on your environment (OS, browser) it might be difficult to place the cursor and add content near some document elements. This pertains to, for example, images, tables or <div> elements that start or end a document, lists, or even adjacent horizontal lines.

CKEditor 4 introduced the Magic Line plugin that helps overcome these limitations.

Usage

The Magic Line plugin causes a red line with a handle (Magic Line handle) to appear when you hover you mouse over any such otherwise inaccessible place in an active editor.

{@img assets/img/magicline_02.png Using magic line to insert a paragraph inside a nested table.}

When you click the magic line's handle, a new paragraph will be inserted into the document. In this example it was added after a table nested in another table, as visible below.

{@img assets/img/magicline_03.png A new paragraph inserted after a nested table.}

Styling the Magic Line

If the default striking red color does not suit you, you can easily modify it by setting the {@linkapi CKEDITOR.config.magicline_color CKEDITOR.config.magicline_color} configuration option, for example:

{@linkapi CKEDITOR.config.magicline_color CKEDITOR.config.magicline_color} = '#0000FF';

This will change magic line's color to blue, as presented in the image below.

{@img assets/img/magicline_04.png Changing the magic line color.}

Keyboard Shortcuts

To further enhance CKEditor's accessibility, the following {@link features/shortcuts/README keyboard shortcuts} are available for working with magic line:

  • Shift+Ctrl+3 – Enables entering content (by adding a new paragraph) before a problematic element.
  • Shift+Ctrl+4 – Enables entering content (by adding a new paragraph) after a problematic element.

You can also adjust the keyboard shortcuts by setting the {@linkapi CKEDITOR.config.magicline_keystrokeNext CKEDITOR.config.magicline_keystrokeNext} and {@linkapi CKEDITOR.config.magicline_keystrokePrevious CKEDITOR.config.magicline_keystrokePrevious} configuration options, respectively. For example:

// Changes the keyboard shortcut to Ctrl + ".".
{@linkapi CKEDITOR.config.magicline_keystrokeNext CKEDITOR.config.magicline_keystrokeNext} = {@linkapi CKEDITOR.CTRL CKEDITOR.CTRL} + 190;

// Changes the keyboard shortcut to Ctrl + ",".
{@linkapi CKEDITOR.config.magicline_keystrokePrevious CKEDITOR.config.magicline_keystrokePrevious} = {@linkapi CKEDITOR.CTRL CKEDITOR.CTRL} + 188;

Adjusting List of Elements Activating Magic Line

It is also possible to modify the default list of elements that trigger the appearance of magic line.

The {@linkapi CKEDITOR.config.magicline_everywhere CKEDITOR.config.magicline_everywhere} option activates the all-encompassing mode which causes magic line to appear for all block-level elements as defined in {@linkapi CKEDITOR.dtd.s-block CKEDITOR.dtd.$block}.

{@linkapi CKEDITOR.config.magicline_everywhere CKEDITOR.config.magicline_everywhere} = true;

The {@linkapi CKEDITOR.config.magicline_tabuList CKEDITOR.config.magicline_tabuList} option lets you blacklist certain elements by providing a list of attributes that, if assigned, prevent magic line from appearing for these elements.

{@linkapi CKEDITOR.config.magicline_tabuList CKEDITOR.config.magicline_tabuList} = [ 'data-tabu' ];

Magic Line Demo

See the {@linkexample magicline working "Magic Line" sample} that showcases how Magic Line helps solve issues with cursor placement before or after elements such as nested tables, <div> elements, adjacent lists, or multiple horizontal rules.