3 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
9 <title>TAB Key-Based Navigation
— CKEditor Sample
</title>
10 <script src=
"../ckeditor.js"></script>
11 <link href=
"sample.css" rel=
"stylesheet">
15 .cke_editable.cke_focused
17 outline:
3px dotted blue !important;
18 *border:
3px dotted blue !important; /* For IE7 */
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>' );
28 // Apply focus class name.
29 editor.on( 'focus', function() {
30 editor.container.addClass( 'cke_focused' );
32 editor.on( 'blur', function() {
33 editor.container.removeClass( 'cke_focused' );
36 // Put startup focus on the first editor in tab order.
37 if ( editor.tabIndex ==
1 )
45 <a href=
"index.html">CKEditor Samples
</a> » TAB Key-Based Navigation
47 <div class=
"description">
49 This sample shows how tab key navigation among editor instances is
50 affected by the
<code>tabIndex
</code> attribute from
51 the original page element. Use TAB key to move between the editors.
55 <textarea class=
"ckeditor" cols=
"80" id=
"editor4" rows=
"10" tabindex=
"1"></textarea>
57 <div class=
"ckeditor" contenteditable=
"true" id=
"editor1" tabindex=
"4"></div>
59 <textarea class=
"ckeditor" cols=
"80" id=
"editor2" rows=
"10" tabindex=
"2"></textarea>
62 <textarea class=
"ckeditor" cols=
"80" id=
"editor3" rows=
"10" tabindex=
"3"></textarea>
67 CKEditor - The text editor for the Internet -
<a class=
"samples" href=
"http://ckeditor.com/">http://ckeditor.com
</a>
70 Copyright
© 2003-
2014,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> - Frederico
71 Knabben. All rights reserved.