| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title></title> |
|---|
| 5 | <meta charset="utf-8"> |
|---|
| 6 | <script src="../ckeditor.js"></script> |
|---|
| 7 | <link href="sample.css" rel="stylesheet"> |
|---|
| 8 | </head> |
|---|
| 9 | <body> |
|---|
| 10 | <textarea cols="80" id="editor1" name="editor1" rows="10"> |
|---|
| 11 | <p> |
|---|
| 12 | "<b>Little Red Riding Hood</b>" is a famous <a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale">fairy tale</a> about a young girl's encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.</p> |
|---|
| 13 | </textarea> |
|---|
| 14 | <script> |
|---|
| 15 | CKEDITOR.replace( 'editor1', { on: { |
|---|
| 16 | instanceReady: function() { |
|---|
| 17 | var i = 0, j = 0, k = 0, |
|---|
| 18 | editor = this; |
|---|
| 19 | |
|---|
| 20 | editor.on( 'focus', function() { console.log( 'focus:', i++ ) } ); |
|---|
| 21 | editor.on( 'blur', function() { console.log( 'blur:', j++ ) } ); |
|---|
| 22 | editor.on( 'selectionChange', function() { console.log( 'selectionChange:', k++ ) } ); |
|---|
| 23 | editor.editable().on( 'click', function() { |
|---|
| 24 | var path = editor.elementPath(); |
|---|
| 25 | |
|---|
| 26 | console.log( 'selection path:', path.elements.map( function( el ) { return el.getName(); } ).reverse().join( ', ' ) ); |
|---|
| 27 | } ); |
|---|
| 28 | } |
|---|
| 29 | } } ); |
|---|
| 30 | |
|---|
| 31 | </script> |
|---|
| 32 | </body> |
|---|
| 33 | </html> |
|---|
