skins/ckeditor/samples/api.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2014, 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>API Usage &mdash; 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         // Get the editor instance that we want to interact with.
  92         var editor = CKEDITOR.instances.editor1;
  93         // Checks whether the current editor contents present changes when compared
  94         // to the contents loaded into the editor at startup
  95         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
  96         alert( editor.checkDirty() );
  97 }
  98
  99 function ResetDirty() {
 100         // Get the editor instance that we want to interact with.
 101         var editor = CKEDITOR.instances.editor1;
 102         // Resets the "dirty state" of the editor (see CheckDirty())
 103         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
 104         editor.resetDirty();
 105         alert( 'The "IsDirty" status has been reset' );
 106 }
 107
 108 function Focus() {
 109         CKEDITOR.instances.editor1.focus();
 110 }
 111
 112 function onFocus() {
 113         document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
 114 }
 115
 116 function onBlur() {
 117         document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
 118 }
 119
 120         </script>
 121
 122 </head>
 123 <body>
 124         <h1 class="samples">
 125                 <a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API
 126         </h1>
 127         <div class="description">
 128         <p>
 129                 This sample shows how to use the
 130                 <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
 131                 to interact with the editor at runtime.
 132         </p>
 133         <p>
 134                 For details on how to create this setup check the source code of this sample page.
 135         </p>
 136         </div>
 137
 138         <!-- This <div> holds alert messages to be display in the sample page. -->
 139         <div id="alerts">
 140                 <noscript>
 141                         <p>
 142                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
 143                                 support, like yours, you should still see the contents (HTML data) and you should
 144                                 be able to edit it normally, without a rich editor interface.
 145                         </p>
 146                 </noscript>
 147         </div>
 148         <form action="../../../samples/sample_posteddata.php" method="post">
 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>
 150
 151                 <script>
 152                         // Replace the <textarea id="editor1"> with an CKEditor instance.
 153                         CKEDITOR.replace( 'editor1', {
 154                                 on: {
 155                                         focus: onFocus,
 156                                         blur: onBlur,
 157
 158                                         // Check for availability of corresponding plugins.
 159                                         pluginsLoaded: function( evt ) {
 160                                                 var doc = CKEDITOR.document, ed = evt.editor;
 161                                                 if ( !ed.getCommand( 'bold' ) )
 162                                                         doc.getById( 'exec-bold' ).hide();
 163                                                 if ( !ed.getCommand( 'link' ) )
 164                                                         doc.getById( 'exec-link' ).hide();
 165                                         }
 166                                 }
 167                         });
 168                 </script>
 169
 170                 <p id="eMessage">
 171                 </p>
 172
 173                 <div id="eButtons" style="display: none">
 174                         <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">
 175                         <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">
 176                         <input onclick="Focus();" type="button" value="Focus">
 177                         <br><br>
 178                         <input onclick="InsertHTML();" type="button" value="Insert HTML">
 179                         <input onclick="SetContents();" type="button" value="Set Editor Contents">
 180                         <input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
 181                         <br>
 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>
 183                         <br>
 184                         <br>
 185                         <input onclick="InsertText();" type="button" value="Insert Text">
 186                         <br>
 187                         <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.
 188
 189 Second line of text preceded by two line breaks.</textarea>
 190                         <br>
 191                         <br>
 192                         <input onclick="CheckDirty();" type="button" value="checkDirty()">
 193                         <input onclick="ResetDirty();" type="button" value="resetDirty()">
 194                 </div>
 195         </form>
 196         <div id="footer">
 197                 <hr>
 198                 <p>
 199                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 200                 </p>
 201                 <p id="copy">
 202                         Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 203                         Knabben. All rights reserved.
 204                 </p>
 205         </div>
 206 </body>
 207 </html>