2017-07-01 20:16:47 +00:00
<!DOCTYPE html>
<!--
2019-02-18 12:28:41 +00:00
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
2018-02-04 12:51:11 +00:00
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
2017-07-01 20:16:47 +00:00
-->
< html >
< head >
< meta charset = "utf-8" >
< title > TAB Key-Based Navigation — CKEditor Sample< / title >
< script src = "../../ckeditor.js" > < / script >
< link href = "sample.css" rel = "stylesheet" >
< style >
.cke_focused,
.cke_editable.cke_focused
{
outline: 3px dotted blue !important;
*border: 3px dotted blue !important; /* For IE7 */
}
< / style >
< script >
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor;
editor.setData( 'This editor has it\'s tabIndex set to < strong > ' + editor.tabIndex + '< / strong > ' );
// Apply focus class name.
editor.on( 'focus', function() {
editor.container.addClass( 'cke_focused' );
});
editor.on( 'blur', function() {
editor.container.removeClass( 'cke_focused' );
});
// Put startup focus on the first editor in tab order.
if ( editor.tabIndex == 1 )
editor.focus();
});
< / script >
< / head >
< body >
< h1 class = "samples" >
< a href = "index.html" > CKEditor Samples< / a > » TAB Key-Based Navigation
< / h1 >
< div class = "warning deprecated" >
2019-08-09 11:38:10 +00:00
This sample is not maintained anymore. Check out its < a href = "https://ckeditor.com/docs/ckeditor4/latest/examples/tabindex.html" > brand new version in CKEditor Examples< / a > .
2017-07-01 20:16:47 +00:00
< / div >
< div class = "description" >
< p >
This sample shows how tab key navigation among editor instances is
affected by the < code > tabIndex< / code > attribute from
the original page element. Use TAB key to move between the editors.
< / p >
< / div >
< p >
< textarea class = "ckeditor" cols = "80" id = "editor4" rows = "10" tabindex = "1" > < / textarea >
< / p >
< div class = "ckeditor" contenteditable = "true" id = "editor1" tabindex = "4" > < / div >
< p >
< textarea class = "ckeditor" cols = "80" id = "editor2" rows = "10" tabindex = "2" > < / textarea >
< / p >
< p >
< textarea class = "ckeditor" cols = "80" id = "editor3" rows = "10" tabindex = "3" > < / textarea >
< / p >
< div id = "footer" >
< hr >
< p >
2018-02-04 12:51:11 +00:00
CKEditor - The text editor for the Internet - < a class = "samples" href = "https://ckeditor.com/" > https://ckeditor.com< / a >
2017-07-01 20:16:47 +00:00
< / p >
< p id = "copy" >
2019-02-18 12:28:41 +00:00
Copyright © 2003-2019, < a class = "samples" href = "https://cksource.com/" > CKSource< / a > - Frederico
2017-07-01 20:16:47 +00:00
Knabben. All rights reserved.
< / p >
< / div >
< / body >
< / html >
