panikdb/static/ckeditor/ckeditor/samples/api.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>API Usage &mdash; CKEditor Sample</title>\r
  10         <script src="../ckeditor.js"></script>\r
  11         <link href="sample.css" rel="stylesheet">\r
  12         <script>\r
  13 \r
  14 // The instanceReady event is fired, when an instance of CKEditor has finished\r
  15 // its initialization.\r
  16 CKEDITOR.on( 'instanceReady', function( ev ) {\r
  17         // Show the editor name and description in the browser status bar.\r
  18         document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';\r
  19 \r
  20         // Show this sample buttons.\r
  21         document.getElementById( 'eButtons' ).style.display = 'block';\r
  22 });\r
  23 \r
  24 function InsertHTML() {\r
  25         // Get the editor instance that we want to interact with.\r
  26         var editor = CKEDITOR.instances.editor1;\r
  27         var value = document.getElementById( 'htmlArea' ).value;\r
  28 \r
  29         // Check the active editing mode.\r
  30         if ( editor.mode == 'wysiwyg' )\r
  31         {\r
  32                 // Insert HTML code.\r
  33                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml\r
  34                 editor.insertHtml( value );\r
  35         }\r
  36         else\r
  37                 alert( 'You must be in WYSIWYG mode!' );\r
  38 }\r
  39 \r
  40 function InsertText() {\r
  41         // Get the editor instance that we want to interact with.\r
  42         var editor = CKEDITOR.instances.editor1;\r
  43         var value = document.getElementById( 'txtArea' ).value;\r
  44 \r
  45         // Check the active editing mode.\r
  46         if ( editor.mode == 'wysiwyg' )\r
  47         {\r
  48                 // Insert as plain text.\r
  49                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText\r
  50                 editor.insertText( value );\r
  51         }\r
  52         else\r
  53                 alert( 'You must be in WYSIWYG mode!' );\r
  54 }\r
  55 \r
  56 function SetContents() {\r
  57         // Get the editor instance that we want to interact with.\r
  58         var editor = CKEDITOR.instances.editor1;\r
  59         var value = document.getElementById( 'htmlArea' ).value;\r
  60 \r
  61         // Set editor contents (replace current contents).\r
  62         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData\r
  63         editor.setData( value );\r
  64 }\r
  65 \r
  66 function GetContents() {\r
  67         // Get the editor instance that you want to interact with.\r
  68         var editor = CKEDITOR.instances.editor1;\r
  69 \r
  70         // Get editor contents\r
  71         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData\r
  72         alert( editor.getData() );\r
  73 }\r
  74 \r
  75 function ExecuteCommand( commandName ) {\r
  76         // Get the editor instance that we want to interact with.\r
  77         var editor = CKEDITOR.instances.editor1;\r
  78 \r
  79         // Check the active editing mode.\r
  80         if ( editor.mode == 'wysiwyg' )\r
  81         {\r
  82                 // Execute the command.\r
  83                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand\r
  84                 editor.execCommand( commandName );\r
  85         }\r
  86         else\r
  87                 alert( 'You must be in WYSIWYG mode!' );\r
  88 }\r
  89 \r
  90 function CheckDirty() {\r
  91         // Get the editor instance that we want to interact with.\r
  92         var editor = CKEDITOR.instances.editor1;\r
  93         // Checks whether the current editor contents present changes when compared\r
  94         // to the contents loaded into the editor at startup\r
  95         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty\r
  96         alert( editor.checkDirty() );\r
  97 }\r
  98 \r
  99 function ResetDirty() {\r
 100         // Get the editor instance that we want to interact with.\r
 101         var editor = CKEDITOR.instances.editor1;\r
 102         // Resets the "dirty state" of the editor (see CheckDirty())\r
 103         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty\r
 104         editor.resetDirty();\r
 105         alert( 'The "IsDirty" status has been reset' );\r
 106 }\r
 107 \r
 108 function Focus() {\r
 109         CKEDITOR.instances.editor1.focus();\r
 110 }\r
 111 \r
 112 function onFocus() {\r
 113         document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';\r
 114 }\r
 115 \r
 116 function onBlur() {\r
 117         document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';\r
 118 }\r
 119 \r
 120         </script>\r
 121 \r
 122 </head>\r
 123 <body>\r
 124         <h1 class="samples">\r
 125                 <a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API\r
 126         </h1>\r
 127         <div class="description">\r
 128         <p>\r
 129                 This sample shows how to use the\r
 130                 <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>\r
 131                 to interact with the editor at runtime.\r
 132         </p>\r
 133         <p>\r
 134                 For details on how to create this setup check the source code of this sample page.\r
 135         </p>\r
 136         </div>\r
 137 \r
 138         <!-- This <div> holds alert messages to be display in the sample page. -->\r
 139         <div id="alerts">\r
 140                 <noscript>\r
 141                         <p>\r
 142                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
 143                                 support, like yours, you should still see the contents (HTML data) and you should\r
 144                                 be able to edit it normally, without a rich editor interface.\r
 145                         </p>\r
 146                 </noscript>\r
 147         </div>\r
 148         <form action="../../../samples/sample_posteddata.php" method="post">\r
 149                 <textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>\r
 150 \r
 151                 <script>\r
 152                         // Replace the <textarea id="editor1"> with an CKEditor instance.\r
 153                         CKEDITOR.replace( 'editor1', {\r
 154                                 on: {\r
 155                                         focus: onFocus,\r
 156                                         blur: onBlur,\r
 157 \r
 158                                         // Check for availability of corresponding plugins.\r
 159                                         pluginsLoaded: function( evt ) {\r
 160                                                 var doc = CKEDITOR.document, ed = evt.editor;\r
 161                                                 if ( !ed.getCommand( 'bold' ) )\r
 162                                                         doc.getById( 'exec-bold' ).hide();\r
 163                                                 if ( !ed.getCommand( 'link' ) )\r
 164                                                         doc.getById( 'exec-link' ).hide();\r
 165                                         }\r
 166                                 }\r
 167                         });\r
 168                 </script>\r
 169 \r
 170                 <p id="eMessage">\r
 171                 </p>\r
 172 \r
 173                 <div id="eButtons" style="display: none">\r
 174                         <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">\r
 175                         <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">\r
 176                         <input onclick="Focus();" type="button" value="Focus">\r
 177                         <br><br>\r
 178                         <input onclick="InsertHTML();" type="button" value="Insert HTML">\r
 179                         <input onclick="SetContents();" type="button" value="Set Editor Contents">\r
 180                         <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)">\r
 181                         <br>\r
 182                         <textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</textarea>\r
 183                         <br>\r
 184                         <br>\r
 185                         <input onclick="InsertText();" type="button" value="Insert Text">\r
 186                         <br>\r
 187                         <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.\r
 188 \r
 189 Second line of text preceded by two line breaks.</textarea>\r
 190                         <br>\r
 191                         <br>\r
 192                         <input onclick="CheckDirty();" type="button" value="checkDirty()">\r
 193                         <input onclick="ResetDirty();" type="button" value="resetDirty()">\r
 194                 </div>\r
 195         </form>\r
 196         <div id="footer">\r
 197                 <hr>\r
 198                 <p>\r
 199                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
 200                 </p>\r
 201                 <p id="copy">\r
 202                         Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 203                         Knabben. All rights reserved.\r
 204                 </p>\r
 205         </div>\r
 206 </body>\r
 207 </html>\r