Projet

Général

Profil

Paste
Télécharger (8,21 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / libraries / ckeditor-4.9.2-full / samples / old / magicline / magicline.html @ b986a83e

1 
<!DOCTYPE html>
2 
<!--
3 
Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
4 
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
5 
-->
6 
<html>
7 
<head>
8 
        <meta charset="utf-8">
9 
        <title>Using Magicline plugin &mdash; CKEditor Sample</title>
10 
        <script src="../../../ckeditor.js"></script>
11 
        <link rel="stylesheet" href="../../../samples/old/sample.css">
12 
        <meta name="ckeditor-sample-name" content="Magicline plugin">
13 
        <meta name="ckeditor-sample-group" content="Plugins">
14 
        <meta name="ckeditor-sample-description" content="Using the Magicline plugin to access difficult focus spaces.">
15 
</head>
16 
<body>
17 
        <h1 class="samples">
18 
                <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using Magicline plugin
19 
        </h1>
20 
        <div class="warning deprecated">
21 
                This sample is not maintained anymore. Check out its <a href="https://sdk.ckeditor.com/samples/magicline.html">brand new version in CKEditor SDK</a>.
22 
        </div>
23 
        <div class="description">
24 
                <p>
25 
                        This sample shows the advantages of <strong>Magicline</strong> plugin
26 
                        which is to enhance the editing process. Thanks to this plugin,
27 
                        a number of difficult focus spaces which are inaccessible due to
28 
                        browser issues can now be focused.
29 
                </p>
30 
                <p>
31 
                        <strong>Magicline</strong> plugin shows a red line with a handler
32 
                        which, when clicked, inserts a paragraph and allows typing. To see this,
33 
                        focus an editor and move your mouse above the focus space you want
34 
                        to access. The plugin is enabled by default so no additional
35 
                        configuration is necessary.
36 
                </p>
37 
        </div>
38 
        <div>
39 
                <label for="editor1">
40 
                        Editor 1:
41 
                </label>
42 
                <div class="description">
43 
                        <p>
44 
                                This editor uses a default <strong>Magicline</strong> setup.
45 
                        </p>
46 
                </div>
47 
                <textarea cols="80" id="editor1" name="editor1" rows="10">
48 
                        &lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
49 
                                &lt;tbody&gt;
50 
                                        &lt;tr&gt;
51 
                                                &lt;td&gt;This table&lt;/td&gt;
52 
                                                &lt;td&gt;is the&lt;/td&gt;
53 
                                                &lt;td&gt;very first&lt;/td&gt;
54 
                                                &lt;td&gt;element of the document.&lt;/td&gt;
55 
                                        &lt;/tr&gt;
56 
                                        &lt;tr&gt;
57 
                                                &lt;td&gt;We are still&lt;/td&gt;
58 
                                                &lt;td&gt;able to acces&lt;/td&gt;
59 
                                                &lt;td&gt;the space before it.&lt;/td&gt;
60 
                                                &lt;td&gt;
61 
                                                &lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
62 
                                                        &lt;tbody&gt;
63 
                                                                &lt;tr&gt;
64 
                                                                        &lt;td&gt;This table is inside of a cell of another table.&lt;/td&gt;
65 
                                                                &lt;/tr&gt;
66 
                                                                &lt;tr&gt;
67 
                                                                        &lt;td&gt;We can type&amp;nbsp;either before or after it though.&lt;/td&gt;
68 
                                                                &lt;/tr&gt;
69 
                                                        &lt;/tbody&gt;
70 
                                                &lt;/table&gt;
71 
                                                &lt;/td&gt;
72 
                                        &lt;/tr&gt;
73 
                                &lt;/tbody&gt;
74 
                        &lt;/table&gt;
75 

    		
  

  

    
      76
    
    
      
                        &lt;p&gt;Two succesive horizontal lines (&lt;tt&gt;HR&lt;/tt&gt; tags). We can access the space in between:&lt;/p&gt;


    		
  

  

    
      77
    
    
      

    		
  

  

    
      78
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      79
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      80
    
    
      
                        &lt;ol&gt;


    		
  

  

    
      81
    
    
      
                                &lt;li&gt;This numbered list...&lt;/li&gt;


    		
  

  

    
      82
    
    
      
                                &lt;li&gt;...is a neighbour of a horizontal line...&lt;/li&gt;


    		
  

  

    
      83
    
    
      
                                &lt;li&gt;...and another list.&lt;/li&gt;


    		
  

  

    
      84
    
    
      
                        &lt;/ol&gt;


    		
  

  

    
      85
    
    
      

    		
  

  

    
      86
    
    
      
                        &lt;ul&gt;


    		
  

  

    
      87
    
    
      
                                &lt;li&gt;We can type between the lists...&lt;/li&gt;


    		
  

  

    
      88
    
    
      
                                &lt;li&gt;...thanks to &lt;strong&gt;Magicline&lt;/strong&gt;.&lt;/li&gt;


    		
  

  

    
      89
    
    
      
                        &lt;/ul&gt;


    		
  

  

    
      90
    
    
      

    		
  

  

    
      91
    
    
      
                        &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. Phasellus.&lt;/p&gt;


    		
  

  

    
      92
    
    
      

    		
  

  

    
      93
    
    
      
                        &lt;p&gt;Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.&lt;/p&gt;


    		
  

  

    
      94
    
    
      

    		
  

  

    
      95
    
    
      
                        &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;


    		
  

  

    
      96
    
    
      

    		
  

  

    
      97
    
    
      
                        &lt;div style=&quot;border: 2px dashed green; background: #ddd; text-align: center;&quot;&gt;


    		
  

  

    
      98
    
    
      
                        &lt;p&gt;This text is wrapped in a&amp;nbsp;&lt;tt&gt;DIV&lt;/tt&gt;&amp;nbsp;element. We can type after this element though.&lt;/p&gt;


    		
  

  

    
      99
    
    
      
                        &lt;/div&gt;


    		
  

  

    
      100
    
    
      
                </textarea>


    		
  

  

    
      101
    
    
      
                <script>


    		
  

  

    
      102
    
    
      



    		
  

  

    
      103
    
    
      
                        // This call can be placed at any point after the


    		
  

  

    
      104
    
    
      
                        // <textarea>, or inside a <head><script> in a


    		
  

  

    
      105
    
    
      
                        // window.onload event handler.


    		
  

  

    
      106
    
    
      



    		
  

  

    
      107
    
    
      
                        CKEDITOR.replace( 'editor1', {


    		
  

  

    
      108
    
    
      
                                extraPlugins: 'magicline',        // Ensure that magicline plugin, which is required for this sample, is loaded.


    		
  

  

    
      109
    
    
      
                                allowedContent: true                // Switch off the ACF, so very complex content created to


    		
  

  

    
      110
    
    
      
                                                                                        // show magicline's power isn't filtered.


    		
  

  

    
      111
    
    
      
                        } );


    		
  

  

    
      112
    
    
      

    		
  

  

    
      113
    
    
      
                </script>


    		
  

  

    
      114
    
    
      
        </div>


    		
  

  

    
      115
    
    
      
        <br>


    		
  

  

    
      116
    
    
      
        <div>


    		
  

  

    
      117
    
    
      
                <label for="editor2">


    		
  

  

    
      118
    
    
      
                        Editor 2:


    		
  

  

    
      119
    
    
      
                </label>


    		
  

  

    
      120
    
    
      
                <div class="description">


    		
  

  

    
      121
    
    
      
                        <p>


    		
  

  

    
      122
    
    
      
                                This editor is using a blue line.


    		
  

  

    
      123
    
    
      
                        </p>


    		
  

  

    
      124
    
    
      
<pre class="samples">


    		
  

  

    
      125
    
    
      
CKEDITOR.replace( 'editor2', {


    		
  

  

    
      126
    
    
      
        magicline_color: 'blue'


    		
  

  

    
      127
    
    
      
});</pre>


    		
  

  

    
      128
    
    
      
                </div>


    		
  

  

    
      129
    
    
      
                <textarea cols="80" id="editor2" name="editor2" rows="10">


    		
  

  

    
      130
    
    
      
                        &lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;


    		
  

  

    
      131
    
    
      
                                &lt;tbody&gt;


    		
  

  

    
      132
    
    
      
                                        &lt;tr&gt;


    		
  

  

    
      133
    
    
      
                                                &lt;td&gt;This table&lt;/td&gt;


    		
  

  

    
      134
    
    
      
                                                &lt;td&gt;is the&lt;/td&gt;


    		
  

  

    
      135
    
    
      
                                                &lt;td&gt;very first&lt;/td&gt;


    		
  

  

    
      136
    
    
      
                                                &lt;td&gt;element of the document.&lt;/td&gt;


    		
  

  

    
      137
    
    
      
                                        &lt;/tr&gt;


    		
  

  

    
      138
    
    
      
                                        &lt;tr&gt;


    		
  

  

    
      139
    
    
      
                                                &lt;td&gt;We are still&lt;/td&gt;


    		
  

  

    
      140
    
    
      
                                                &lt;td&gt;able to acces&lt;/td&gt;


    		
  

  

    
      141
    
    
      
                                                &lt;td&gt;the space before it.&lt;/td&gt;


    		
  

  

    
      142
    
    
      
                                                &lt;td&gt;


    		
  

  

    
      143
    
    
      
                                                &lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;


    		
  

  

    
      144
    
    
      
                                                        &lt;tbody&gt;


    		
  

  

    
      145
    
    
      
                                                                &lt;tr&gt;


    		
  

  

    
      146
    
    
      
                                                                        &lt;td&gt;This table is inside of a cell of another table.&lt;/td&gt;


    		
  

  

    
      147
    
    
      
                                                                &lt;/tr&gt;


    		
  

  

    
      148
    
    
      
                                                                &lt;tr&gt;


    		
  

  

    
      149
    
    
      
                                                                        &lt;td&gt;We can type&amp;nbsp;either before or after it though.&lt;/td&gt;


    		
  

  

    
      150
    
    
      
                                                                &lt;/tr&gt;


    		
  

  

    
      151
    
    
      
                                                        &lt;/tbody&gt;


    		
  

  

    
      152
    
    
      
                                                &lt;/table&gt;


    		
  

  

    
      153
    
    
      
                                                &lt;/td&gt;


    		
  

  

    
      154
    
    
      
                                        &lt;/tr&gt;


    		
  

  

    
      155
    
    
      
                                &lt;/tbody&gt;


    		
  

  

    
      156
    
    
      
                        &lt;/table&gt;


    		
  

  

    
      157
    
    
      

    		
  

  

    
      158
    
    
      
                        &lt;p&gt;Two succesive horizontal lines (&lt;tt&gt;HR&lt;/tt&gt; tags). We can access the space in between:&lt;/p&gt;


    		
  

  

    
      159
    
    
      

    		
  

  

    
      160
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      161
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      162
    
    
      
                        &lt;ol&gt;


    		
  

  

    
      163
    
    
      
                                &lt;li&gt;This numbered list...&lt;/li&gt;


    		
  

  

    
      164
    
    
      
                                &lt;li&gt;...is a neighbour of a horizontal line...&lt;/li&gt;


    		
  

  

    
      165
    
    
      
                                &lt;li&gt;...and another list.&lt;/li&gt;


    		
  

  

    
      166
    
    
      
                        &lt;/ol&gt;


    		
  

  

    
      167
    
    
      

    		
  

  

    
      168
    
    
      
                        &lt;ul&gt;


    		
  

  

    
      169
    
    
      
                                &lt;li&gt;We can type between the lists...&lt;/li&gt;


    		
  

  

    
      170
    
    
      
                                &lt;li&gt;...thanks to &lt;strong&gt;Magicline&lt;/strong&gt;.&lt;/li&gt;


    		
  

  

    
      171
    
    
      
                        &lt;/ul&gt;


    		
  

  

    
      172
    
    
      

    		
  

  

    
      173
    
    
      
                        &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. Phasellus.&lt;/p&gt;


    		
  

  

    
      174
    
    
      

    		
  

  

    
      175
    
    
      
                        &lt;p&gt;Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.&lt;/p&gt;


    		
  

  

    
      176
    
    
      

    		
  

  

    
      177
    
    
      
                        &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;


    		
  

  

    
      178
    
    
      

    		
  

  

    
      179
    
    
      
                        &lt;div style=&quot;border: 2px dashed green; background: #ddd; text-align: center;&quot;&gt;


    		
  

  

    
      180
    
    
      
                        &lt;p&gt;This text is wrapped in a&amp;nbsp;&lt;tt&gt;DIV&lt;/tt&gt;&amp;nbsp;element. We can type after this element though.&lt;/p&gt;


    		
  

  

    
      181
    
    
      
                        &lt;/div&gt;


    		
  

  

    
      182
    
    
      
                </textarea>


    		
  

  

    
      183
    
    
      
                <script>


    		
  

  

    
      184
    
    
      



    		
  

  

    
      185
    
    
      
                        // This call can be placed at any point after the


    		
  

  

    
      186
    
    
      
                        // <textarea>, or inside a <head><script> in a


    		
  

  

    
      187
    
    
      
                        // window.onload event handler.


    		
  

  

    
      188
    
    
      



    		
  

  

    
      189
    
    
      
                        CKEDITOR.replace( 'editor2', {


    		
  

  

    
      190
    
    
      
                                extraPlugins: 'magicline',        // Ensure that magicline plugin, which is required for this sample, is loaded.


    		
  

  

    
      191
    
    
      
                                magicline_color: 'blue',        // Blue line


    		
  

  

    
      192
    
    
      
                                allowedContent: true                // Switch off the ACF, so very complex content created to


    		
  

  

    
      193
    
    
      
                                                                                        // show magicline's power isn't filtered.


    		
  

  

    
      194
    
    
      
                        });


    		
  

  

    
      195
    
    
      

    		
  

  

    
      196
    
    
      
                </script>


    		
  

  

    
      197
    
    
      
        </div>


    		
  

  

    
      198
    
    
      
        <div id="footer">


    		
  

  

    
      199
    
    
      
                <hr>


    		
  

  

    
      200
    
    
      
                <p>


    		
  

  

    
      201
    
    
      
                        CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>


    		
  

  

    
      202
    
    
      
                </p>


    		
  

  

    
      203
    
    
      
                <p id="copy">


    		
  

  

    
      204
    
    
      
                        Copyright &copy; 2003-2018, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico


    		
  

  

    
      205
    
    
      
                        Knabben. All rights reserved.


    		
  

  

    
      206
    
    
      
                </p>


    		
  

  

    
      207
    
    
      
        </div>


    		
  

  

    
      208
    
    
      
</body>


    		
  

  

    
      209
    
    
      
</html>