Using Magicline plugin — CKEditor Sample

This sample shows the advantages of Magicline plugin which is to enhance the editing process. Thanks to this plugin, a number of difficult focus spaces which are inaccessible due to browser issues can now be focused.

Magicline plugin shows a red line with a handler which, when clicked, inserts a paragraph and allows typing. To see this, focus an editor and move your mouse above the focus space you want to access. The plugin is enabled by default so no additional configuration is necessary.

Editor 1:

This editor uses a default Magicline setup.

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;
        ">
        <tbody>
        <tr>
        <td>This table</td>
        <td>is the</td>
        <td>very first</td>
        <td>element of the document.</td>
        </tr>
        <tr>
        <td>We are still</td>
        <td>able to acces</td>
        <td>the space before it.</td>
        <td>
        <table border="1" cellpadding="1" cellspacing="1" style="width: 100%;
        ">
        <tbody>
        <tr>
        <td>This table is inside of a cell of another table.</td>
        </tr>
        <tr>
        <td>We can type&nbsp;either before or after it though.</td>
        </tr>
        </tbody>
        </table>
        </td>
        </tr>
        </tbody>
        </table>

<p>Two succesive horizontal lines (<tt>HR</tt> tags). We can access the space in between:</p>

<hr />
        <hr />
        <ol>
        <li>This numbered list...</li>
        <li>...is a neighbour of a horizontal line...</li>
        <li>...and another list.</li>
        </ol>

<ul>
        <li>We can type between the lists...</li>
        <li>...thanks to <strong>Magicline</strong>.</li>
        </ul>

<p>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. Phasellus.</p>

<p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy
        commodo nec, pede. Etiam blandit risus elit.</p>

<p>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.</p>

<div style="border: 2px dashed green; background: #ddd; text-align: center;">
        <p>This text is wrapped in a&nbsp;<tt>DIV</tt>&nbsp;element. We can type after this
        element though.</p>
        </div>

Editor 2:

This editor is using a blue line with slight opacity.

CKEDITOR.replace( 'editor2', {
	magicline_color : 'blue',
	magicline_opacity : .8
});

<p>Two succesive horizontal lines (<tt>HR</tt> tags). We can access the space in between:</p>

<hr />
        <hr />
        <ol>
        <li>This numbered list...</li>
        <li>...is a neighbour of a horizontal line...</li>
        <li>...and another list.</li>
        </ol>

<ul>
        <li>We can type between the lists...</li>
        <li>...thanks to <strong>Magicline</strong>.</li>
        </ul>

<p>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. Phasellus.</p>

<p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy
        commodo nec, pede. Etiam blandit risus elit.</p>

CKEditor Samples » Using Magicline plugin