CKEditor Samples » Using Magicline plugin

This sample is not maintained anymore. Check out its brand new version in CKEditor SDK.

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.

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