Projet

Général

Profil

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

root / drupal7 / sites / all / libraries / ckeditor-version / samples / plugins / magicline / magicline.html @ 5a7e6170

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

    		
  

  

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


    		
  

  

    
      75
    
    
      

    		
  

  

    
      76
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      77
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      78
    
    
      
                        &lt;ol&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

    
      82
    
    
      
                        &lt;/ol&gt;


    		
  

  

    
      83
    
    
      

    		
  

  

    
      84
    
    
      
                        &lt;ul&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

    
      87
    
    
      
                        &lt;/ul&gt;


    		
  

  

    
      88
    
    
      

    		
  

  

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


    		
  

  

    
      90
    
    
      

    		
  

  

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


    		
  

  

    
      92
    
    
      

    		
  

  

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


    		
  

  

    
      94
    
    
      

    		
  

  

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


    		
  

  

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


    		
  

  

    
      97
    
    
      
                        &lt;/div&gt;


    		
  

  

    
      98
    
    
      
                </textarea>


    		
  

  

    
      99
    
    
      
                <script>


    		
  

  

    
      100
    
    
      



    		
  

  

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


    		
  

  

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


    		
  

  

    
      103
    
    
      
                        // window.onload event handler.


    		
  

  

    
      104
    
    
      



    		
  

  

    
      105
    
    
      
                        CKEDITOR.replace( 'editor1', {


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

    
      109
    
    
      
                        } );


    		
  

  

    
      110
    
    
      

    		
  

  

    
      111
    
    
      
                </script>


    		
  

  

    
      112
    
    
      
        </div>


    		
  

  

    
      113
    
    
      
        <br>


    		
  

  

    
      114
    
    
      
        <div>


    		
  

  

    
      115
    
    
      
                <label for="editor2">


    		
  

  

    
      116
    
    
      
                        Editor 2:


    		
  

  

    
      117
    
    
      
                </label>


    		
  

  

    
      118
    
    
      
                <div class="description">


    		
  

  

    
      119
    
    
      
                        <p>


    		
  

  

    
      120
    
    
      
                                This editor is using a blue line.


    		
  

  

    
      121
    
    
      
                        </p>


    		
  

  

    
      122
    
    
      
<pre class="samples">


    		
  

  

    
      123
    
    
      
CKEDITOR.replace( 'editor2', {


    		
  

  

    
      124
    
    
      
        magicline_color: 'blue'


    		
  

  

    
      125
    
    
      
});</pre>


    		
  

  

    
      126
    
    
      
                </div>


    		
  

  

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


    		
  

  

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


    		
  

  

    
      129
    
    
      
                                &lt;tbody&gt;


    		
  

  

    
      130
    
    
      
                                        &lt;tr&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

    
      135
    
    
      
                                        &lt;/tr&gt;


    		
  

  

    
      136
    
    
      
                                        &lt;tr&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

    
      140
    
    
      
                                                &lt;td&gt;


    		
  

  

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


    		
  

  

    
      142
    
    
      
                                                        &lt;tbody&gt;


    		
  

  

    
      143
    
    
      
                                                                &lt;tr&gt;


    		
  

  

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


    		
  

  

    
      145
    
    
      
                                                                &lt;/tr&gt;


    		
  

  

    
      146
    
    
      
                                                                &lt;tr&gt;


    		
  

  

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


    		
  

  

    
      148
    
    
      
                                                                &lt;/tr&gt;


    		
  

  

    
      149
    
    
      
                                                        &lt;/tbody&gt;


    		
  

  

    
      150
    
    
      
                                                &lt;/table&gt;


    		
  

  

    
      151
    
    
      
                                                &lt;/td&gt;


    		
  

  

    
      152
    
    
      
                                        &lt;/tr&gt;


    		
  

  

    
      153
    
    
      
                                &lt;/tbody&gt;


    		
  

  

    
      154
    
    
      
                        &lt;/table&gt;


    		
  

  

    
      155
    
    
      

    		
  

  

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


    		
  

  

    
      157
    
    
      

    		
  

  

    
      158
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      159
    
    
      
                        &lt;hr /&gt;


    		
  

  

    
      160
    
    
      
                        &lt;ol&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

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


    		
  

  

    
      164
    
    
      
                        &lt;/ol&gt;


    		
  

  

    
      165
    
    
      

    		
  

  

    
      166
    
    
      
                        &lt;ul&gt;


    		
  

  

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


    		
  

  

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


    		
  

  

    
      169
    
    
      
                        &lt;/ul&gt;


    		
  

  

    
      170
    
    
      

    		
  

  

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


    		
  

  

    
      172
    
    
      

    		
  

  

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


    		
  

  

    
      174
    
    
      

    		
  

  

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


    		
  

  

    
      176
    
    
      

    		
  

  

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


    		
  

  

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


    		
  

  

    
      179
    
    
      
                        &lt;/div&gt;


    		
  

  

    
      180
    
    
      
                </textarea>


    		
  

  

    
      181
    
    
      
                <script>


    		
  

  

    
      182
    
    
      



    		
  

  

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


    		
  

  

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


    		
  

  

    
      185
    
    
      
                        // window.onload event handler.


    		
  

  

    
      186
    
    
      



    		
  

  

    
      187
    
    
      
                        CKEDITOR.replace( 'editor2', {


    		
  

  

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


    		
  

  

    
      189
    
    
      
                                magicline_color: 'blue',        // Blue line


    		
  

  

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


    		
  

  

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


    		
  

  

    
      192
    
    
      
                        });


    		
  

  

    
      193
    
    
      

    		
  

  

    
      194
    
    
      
                </script>


    		
  

  

    
      195
    
    
      
        </div>


    		
  

  

    
      196
    
    
      
        <div id="footer">


    		
  

  

    
      197
    
    
      
                <hr>


    		
  

  

    
      198
    
    
      
                <p>


    		
  

  

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


    		
  

  

    
      200
    
    
      
                </p>


    		
  

  

    
      201
    
    
      
                <p id="copy">


    		
  

  

    
      202
    
    
      
                        Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico


    		
  

  

    
      203
    
    
      
                        Knabben. All rights reserved.


    		
  

  

    
      204
    
    
      
                </p>


    		
  

  

    
      205
    
    
      
        </div>


    		
  

  

    
      206
    
    
      
</body>


    		
  

  

    
      207
    
    
      
</html>