skins/ckeditor/samples/tabindex.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2014, 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 &mdash; 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> &raquo; TAB Key-Based Navigation
  46         </h1>
  47         <div class="description">
  48                 <p>
  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.
  52                 </p>
  53         </div>
  54         <p>
  55                 <textarea class="ckeditor" cols="80" id="editor4" rows="10" tabindex="1"></textarea>
  56         </p>
  57         <div class="ckeditor" contenteditable="true" id="editor1" tabindex="4"></div>
  58         <p>
  59                 <textarea class="ckeditor" cols="80" id="editor2" rows="10" tabindex="2"></textarea>
  60         </p>
  61         <p>
  62                 <textarea class="ckeditor" cols="80" id="editor3" rows="10" tabindex="3"></textarea>
  63         </p>
  64         <div id="footer">
  65                 <hr>
  66                 <p>
  67                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  68                 </p>
  69                 <p id="copy">
  70                         Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  71                         Knabben. All rights reserved.
  72                 </p>
  73         </div>
  74 </body>
  75 </html>