release/samples/old/tabindex.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2017, 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="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 &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  74                         Knabben. All rights reserved.
  75                 </p>
  76         </div>
  77 </body>
  78 </html>