CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Magic Line Documentation

Some document elements make placing the cursor in their vicinity problematic. 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. By default, this plugin is included in the Standard and Full editor distributions. It causes a red line with a handle (Magic Line handle) to appear when you hover your mouse over any such otherwise inaccessible place in an active editor. When you click the magic line's handle (or use the default Shift+Ctrl+3 and Shift+Ctrl+4 keyboard shortcut), a new paragraph will be inserted into the document.

A few configuration options are available to fine-tune this feature, including adjusting the magic line color, setting custom keyboard shortcuts, or adjusting which elements should trigger the appearance of the magic line. Refer to the Magic Line article to learn more about this feature.

Get Sample Source Code

  • Magic line 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Magic line</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;table border="1" cellpadding="1" cellspacing="1" style="width: 100%; "&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;This table&lt;/td&gt;
&lt;td&gt;is the&lt;/td&gt;
&lt;td&gt;very first&lt;/td&gt;
&lt;td&gt;element of the document.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;You are still&lt;/td&gt;
&lt;td&gt;able to place&lt;/td&gt;
&lt;td&gt;the cursor before it.&lt;/td&gt;
&lt;td&gt;
&lt;table border="1" cellpadding="1" cellspacing="1" style="width: 100%; "&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;This table is inside a cell of another table.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;You can type&amp;nbsp;either before or after it, though.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;The following are two successive horizontal lines (&lt;code&gt;hr&lt;/code&gt; elements). Thanks to Magic Line you can easily place the cursor in between them:&lt;/p&gt;

&lt;hr /&gt;
&lt;hr /&gt;
&lt;ol&gt;
&lt;li&gt;This numbered list...&lt;/li&gt;
&lt;li&gt;...is a neighbor of the horizontal line above...&lt;/li&gt;
&lt;li&gt;...and also of another list.&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Nevertheless, you can type between the lists...&lt;/li&gt;
&lt;li&gt;...thanks to &lt;strong&gt;Magic Line&lt;/strong&gt;!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa.&lt;/p&gt;

&lt;p&gt;Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida
iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.&lt;/p&gt;

&lt;div style="border: 2px dashed green; background: #ddd; text-align: center;"&gt;
&lt;p&gt;This text is wrapped in a&amp;nbsp;&lt;code&gt;div&lt;/code&gt;&amp;nbsp;element. Thanks to Magic Line you can type after this element, too.&lt;/p&gt;
&lt;/div&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      height: '500',
      // Ensure that the Magic Line plugin, which is required for this sample, is loaded.
      extraPlugins: 'magicline',
      // Magic Line does not require any additional ACF settings.
      // We set config.extraAllowedContent because HTML code in this sample contains
      // a <div> element with custom styles that we would like to allow.
      extraAllowedContent: 'div{border,background,text-align}',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>