| 1 | <!DOCTYPE html> |
|---|
| 2 | <!-- |
|---|
| 3 | Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. |
|---|
| 4 | For licensing, see LICENSE.html or http://ckeditor.com/license |
|---|
| 5 | --> |
|---|
| 6 | <html> |
|---|
| 7 | <head> |
|---|
| 8 | <meta charset="utf-8"> |
|---|
| 9 | <title>API Usage — CKEditor Sample</title> |
|---|
| 10 | <script src="../ckeditor.js"></script> |
|---|
| 11 | <link href="sample.css" rel="stylesheet"> |
|---|
| 12 | <script> |
|---|
| 13 | |
|---|
| 14 | // The instanceReady event is fired, when an instance of CKEditor has finished |
|---|
| 15 | // its initialization. |
|---|
| 16 | CKEDITOR.on( 'instanceReady', function( ev ) { |
|---|
| 17 | // Show the editor name and description in the browser status bar. |
|---|
| 18 | document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.'; |
|---|
| 19 | |
|---|
| 20 | // Show this sample buttons. |
|---|
| 21 | document.getElementById( 'eButtons' ).style.display = 'block'; |
|---|
| 22 | }); |
|---|
| 23 | |
|---|
| 24 | function InsertHTML() { |
|---|
| 25 | // Get the editor instance that we want to interact with. |
|---|
| 26 | var editor = CKEDITOR.instances.editor1; |
|---|
| 27 | var value = document.getElementById( 'htmlArea' ).value; |
|---|
| 28 | |
|---|
| 29 | // Check the active editing mode. |
|---|
| 30 | if ( editor.mode == 'wysiwyg' ) |
|---|
| 31 | { |
|---|
| 32 | // Insert HTML code. |
|---|
| 33 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml |
|---|
| 34 | editor.insertHtml( value ); |
|---|
| 35 | } |
|---|
| 36 | else |
|---|
| 37 | alert( 'You must be in WYSIWYG mode!' ); |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | function InsertText() { |
|---|
| 41 | // Get the editor instance that we want to interact with. |
|---|
| 42 | var editor = CKEDITOR.instances.editor1; |
|---|
| 43 | var value = document.getElementById( 'txtArea' ).value; |
|---|
| 44 | |
|---|
| 45 | // Check the active editing mode. |
|---|
| 46 | if ( editor.mode == 'wysiwyg' ) |
|---|
| 47 | { |
|---|
| 48 | // Insert as plain text. |
|---|
| 49 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText |
|---|
| 50 | editor.insertText( value ); |
|---|
| 51 | } |
|---|
| 52 | else |
|---|
| 53 | alert( 'You must be in WYSIWYG mode!' ); |
|---|
| 54 | } |
|---|
| 55 | |
|---|
| 56 | function SetContents() { |
|---|
| 57 | // Get the editor instance that we want to interact with. |
|---|
| 58 | var editor = CKEDITOR.instances.editor1; |
|---|
| 59 | var value = document.getElementById( 'htmlArea' ).value; |
|---|
| 60 | |
|---|
| 61 | // Set editor contents (replace current contents). |
|---|
| 62 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData |
|---|
| 63 | editor.setData( value ); |
|---|
| 64 | } |
|---|
| 65 | |
|---|
| 66 | function GetContents() { |
|---|
| 67 | // Get the editor instance that you want to interact with. |
|---|
| 68 | var editor = CKEDITOR.instances.editor1; |
|---|
| 69 | |
|---|
| 70 | // Get editor contents |
|---|
| 71 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData |
|---|
| 72 | alert( editor.getData() ); |
|---|
| 73 | } |
|---|
| 74 | |
|---|
| 75 | function ExecuteCommand( commandName ) { |
|---|
| 76 | // Get the editor instance that we want to interact with. |
|---|
| 77 | var editor = CKEDITOR.instances.editor1; |
|---|
| 78 | |
|---|
| 79 | // Check the active editing mode. |
|---|
| 80 | if ( editor.mode == 'wysiwyg' ) |
|---|
| 81 | { |
|---|
| 82 | // Execute the command. |
|---|
| 83 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand |
|---|
| 84 | editor.execCommand( commandName ); |
|---|
| 85 | } |
|---|
| 86 | else |
|---|
| 87 | alert( 'You must be in WYSIWYG mode!' ); |
|---|
| 88 | } |
|---|
| 89 | |
|---|
| 90 | function CheckDirty() { |
|---|
| 91 | alert("i am called"); |
|---|
| 92 | // Get the editor instance that we want to interact with. |
|---|
| 93 | var editor = CKEDITOR.instances.editor1; |
|---|
| 94 | // Checks whether the current editor contents present changes when compared |
|---|
| 95 | // to the contents loaded into the editor at startup |
|---|
| 96 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty |
|---|
| 97 | alert("inside function = "+editor.checkDirty()); |
|---|
| 98 | } |
|---|
| 99 | |
|---|
| 100 | function ResetDirty() { |
|---|
| 101 | |
|---|
| 102 | // Get the editor instance that we want to interact with. |
|---|
| 103 | var editor = CKEDITOR.instances.editor1; |
|---|
| 104 | // Resets the "dirty state" of the editor (see CheckDirty()) |
|---|
| 105 | // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty |
|---|
| 106 | editor.resetDirty(); |
|---|
| 107 | alert( 'The "IsDirty" status has been reset' ); |
|---|
| 108 | } |
|---|
| 109 | |
|---|
| 110 | function Focus() { |
|---|
| 111 | CKEDITOR.instances.editor1.focus(); |
|---|
| 112 | } |
|---|
| 113 | |
|---|
| 114 | function onFocus() { |
|---|
| 115 | document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>'; |
|---|
| 116 | } |
|---|
| 117 | |
|---|
| 118 | function onBlur() { |
|---|
| 119 | document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus'; |
|---|
| 120 | } |
|---|
| 121 | |
|---|
| 122 | </script> |
|---|
| 123 | |
|---|
| 124 | </head> |
|---|
| 125 | <body onload="alert(CKEDITOR.instances.editor1.checkDirty());"> |
|---|
| 126 | |
|---|
| 127 | <textarea cols="100" id="editor1" name="editor1" rows="10"></textarea> |
|---|
| 128 | |
|---|
| 129 | <script> |
|---|
| 130 | // Replace the <textarea id="editor1"> with an CKEditor instance. |
|---|
| 131 | CKEDITOR.replace( 'editor1', { |
|---|
| 132 | on: { |
|---|
| 133 | focus: onFocus, |
|---|
| 134 | blur: onBlur, |
|---|
| 135 | |
|---|
| 136 | // Check for availability of corresponding plugins. |
|---|
| 137 | pluginsLoaded: function( evt ) { |
|---|
| 138 | var doc = CKEDITOR.document, ed = evt.editor; |
|---|
| 139 | if ( !ed.getCommand( 'bold' ) ) |
|---|
| 140 | doc.getById( 'exec-bold' ).hide(); |
|---|
| 141 | if ( !ed.getCommand( 'link' ) ) |
|---|
| 142 | doc.getById( 'exec-link' ).hide(); |
|---|
| 143 | } |
|---|
| 144 | } |
|---|
| 145 | }); |
|---|
| 146 | </script> |
|---|
| 147 | |
|---|
| 148 | |
|---|
| 149 | </body> |
|---|
| 150 | </html> |
|---|