| 5 |
lars |
1 |
<!DOCTYPE html>
|
|
|
2 |
<!--
|
|
|
3 |
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
|
|
|
4 |
For licensing, see LICENSE.md or http://ckeditor.com/license
|
|
|
5 |
-->
|
|
|
6 |
<html>
|
|
|
7 |
|
|
|
8 |
<head>
|
|
|
9 |
<meta charset="utf-8">
|
|
|
10 |
<title>Using Magicline plugin — CKEditor Sample</title>
|
|
|
11 |
<script src="../../../ckeditor.js"></script>
|
|
|
12 |
<link rel="stylesheet" href="../../../samples/sample.css">
|
|
|
13 |
<meta name="ckeditor-sample-name" content="Magicline plugin">
|
|
|
14 |
<meta name="ckeditor-sample-group" content="Plugins">
|
|
|
15 |
<meta name="ckeditor-sample-description" content="Using the Magicline plugin to access difficult focus spaces."> </head>
|
|
|
16 |
|
|
|
17 |
<body>
|
|
|
18 |
<h1 class="samples">
|
|
|
19 |
<a href="../../../samples/index.html">CKEditor Samples</a> » Using Magicline plugin </h1>
|
|
|
20 |
<div class="description">
|
|
|
21 |
<p> This sample shows the advantages of
|
|
|
22 |
<strong>Magicline</strong> 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. </p>
|
|
|
23 |
<p>
|
|
|
24 |
<strong>Magicline</strong> 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
|
|
|
25 |
so no additional configuration is necessary. </p>
|
|
|
26 |
</div>
|
|
|
27 |
<div>
|
|
|
28 |
<label for="editor1"> Editor 1: </label>
|
|
|
29 |
<div class="description">
|
|
|
30 |
<p> This editor uses a default
|
|
|
31 |
<strong>Magicline</strong> setup. </p>
|
|
|
32 |
</div>
|
|
|
33 |
<textarea cols="80" id="editor1" name="editor1" rows="10"> <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
|
|
|
34 |
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"
|
|
|
35 |
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>
|
|
|
36 |
</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>
|
|
|
37 |
<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
|
|
|
38 |
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>
|
|
|
39 |
<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
|
|
|
40 |
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:
|
|
|
41 |
#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> </textarea>
|
|
|
42 |
<script>
|
|
|
43 |
// This call can be placed at any point after the
|
|
|
44 |
// <textarea>, or inside a <head><script> in a
|
|
|
45 |
// window.onload event handler.
|
|
|
46 |
CKEDITOR.replace('editor1',
|
|
|
47 |
{
|
|
|
48 |
extraPlugins: 'magicline', // Ensure that magicline plugin, which is required for this sample, is loaded.
|
|
|
49 |
allowedContent: true // Switch off the ACF, so very complex content created to
|
|
|
50 |
// show magicline's power isn't filtered.
|
|
|
51 |
});
|
|
|
52 |
</script>
|
|
|
53 |
</div>
|
|
|
54 |
<br>
|
|
|
55 |
<div>
|
|
|
56 |
<label for="editor2"> Editor 2: </label>
|
|
|
57 |
<div class="description">
|
|
|
58 |
<p> This editor is using a blue line. </p> <pre class="samples">
|
|
|
59 |
CKEDITOR.replace( 'editor2', {
|
|
|
60 |
magicline_color: 'blue'
|
|
|
61 |
});</pre> </div>
|
|
|
62 |
<textarea cols="80" id="editor2" name="editor2" rows="10"> <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
|
|
|
63 |
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"
|
|
|
64 |
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>
|
|
|
65 |
</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>
|
|
|
66 |
<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
|
|
|
67 |
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>
|
|
|
68 |
<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
|
|
|
69 |
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:
|
|
|
70 |
#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> </textarea>
|
|
|
71 |
<script>
|
|
|
72 |
// This call can be placed at any point after the
|
|
|
73 |
// <textarea>, or inside a <head><script> in a
|
|
|
74 |
// window.onload event handler.
|
|
|
75 |
CKEDITOR.replace('editor2',
|
|
|
76 |
{
|
|
|
77 |
extraPlugins: 'magicline', // Ensure that magicline plugin, which is required for this sample, is loaded.
|
|
|
78 |
magicline_color: 'blue', // Blue line
|
|
|
79 |
allowedContent: true // Switch off the ACF, so very complex content created to
|
|
|
80 |
// show magicline's power isn't filtered.
|
|
|
81 |
});
|
|
|
82 |
</script>
|
|
|
83 |
</div>
|
|
|
84 |
<div id="footer">
|
|
|
85 |
<hr>
|
|
|
86 |
<p> CKEditor - The text editor for the Internet -
|
|
|
87 |
<a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
|
|
88 |
</p>
|
|
|
89 |
<p id="copy"> Copyright © 2003-2014,
|
|
|
90 |
<a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved. </p>
|
|
|
91 |
</div>
|
|
|
92 |
</body>
|
|
|
93 |
|
|
|
94 |
</html>
|