| 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 editor = this; |
|---|
| 18 | |
|---|
| 19 | editor.on( 'focus', function() { console.log( 'editor#focus' ) } ); |
|---|
| 20 | editor.on( 'blur', function() { console.log( 'editor#blur' ) } ); |
|---|
| 21 | editor.on( 'selectionChange', function() { console.log( 'selectionChange' ) } ); |
|---|
| 22 | editor.editable().on( 'click', function() { |
|---|
| 23 | var path = editor.elementPath(); |
|---|
| 24 | |
|---|
| 25 | console.log( 'selection path:', path.elements.map( function( el ) { return el.getName(); } ).reverse().join( ', ' ) ); |
|---|
| 26 | } ); |
|---|
| 27 | }, |
|---|
| 28 | contentDom: function() { |
|---|
| 29 | var editor = this, |
|---|
| 30 | editable = editor.editable(); |
|---|
| 31 | |
|---|
| 32 | editable.$.addEventListener( 'focus', function() { |
|---|
| 33 | console.log( 'native editable#focus' ); |
|---|
| 34 | } ); |
|---|
| 35 | editable.$.addEventListener( 'blur', function() { |
|---|
| 36 | console.log( 'native editable#blur' ); |
|---|
| 37 | } ); |
|---|
| 38 | } |
|---|
| 39 | } } ); |
|---|
| 40 | |
|---|
| 41 | </script> |
|---|
| 42 | </body> |
|---|
| 43 | </html> |
|---|
