|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. |
|
4 For licensing, see LICENSE.md or http://ckeditor.com/license |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <meta charset="utf-8"> |
|
9 <title>TAB Key-Based Navigation — CKEditor Sample</title> |
|
10 <script src="../../ckeditor.js"></script> |
|
11 <link href="sample.css" rel="stylesheet"> |
|
12 <style> |
|
13 |
|
14 .cke_focused, |
|
15 .cke_editable.cke_focused |
|
16 { |
|
17 outline: 3px dotted blue !important; |
|
18 *border: 3px dotted blue !important; /* For IE7 */ |
|
19 } |
|
20 |
|
21 </style> |
|
22 <script> |
|
23 |
|
24 CKEDITOR.on( 'instanceReady', function( evt ) { |
|
25 var editor = evt.editor; |
|
26 editor.setData( 'This editor has it\'s tabIndex set to <strong>' + editor.tabIndex + '</strong>' ); |
|
27 |
|
28 // Apply focus class name. |
|
29 editor.on( 'focus', function() { |
|
30 editor.container.addClass( 'cke_focused' ); |
|
31 }); |
|
32 editor.on( 'blur', function() { |
|
33 editor.container.removeClass( 'cke_focused' ); |
|
34 }); |
|
35 |
|
36 // Put startup focus on the first editor in tab order. |
|
37 if ( editor.tabIndex == 1 ) |
|
38 editor.focus(); |
|
39 }); |
|
40 |
|
41 </script> |
|
42 </head> |
|
43 <body> |
|
44 <h1 class="samples"> |
|
45 <a href="index.html">CKEditor Samples</a> » TAB Key-Based Navigation |
|
46 </h1> |
|
47 <div class="warning deprecated"> |
|
48 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/tabindex.html">brand new version in CKEditor SDK</a>. |
|
49 </div> |
|
50 <div class="description"> |
|
51 <p> |
|
52 This sample shows how tab key navigation among editor instances is |
|
53 affected by the <code>tabIndex</code> attribute from |
|
54 the original page element. Use TAB key to move between the editors. |
|
55 </p> |
|
56 </div> |
|
57 <p> |
|
58 <textarea class="ckeditor" cols="80" id="editor4" rows="10" tabindex="1"></textarea> |
|
59 </p> |
|
60 <div class="ckeditor" contenteditable="true" id="editor1" tabindex="4"></div> |
|
61 <p> |
|
62 <textarea class="ckeditor" cols="80" id="editor2" rows="10" tabindex="2"></textarea> |
|
63 </p> |
|
64 <p> |
|
65 <textarea class="ckeditor" cols="80" id="editor3" rows="10" tabindex="3"></textarea> |
|
66 </p> |
|
67 <div id="footer"> |
|
68 <hr> |
|
69 <p> |
|
70 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|
71 </p> |
|
72 <p id="copy"> |
|
73 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|
74 Knabben. All rights reserved. |
|
75 </p> |
|
76 </div> |
|
77 </body> |
|
78 </html> |