samples/tabindex.html

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