diff options
| author | lsces <lester@lsces.co.uk> | 2014-06-07 07:46:37 +0100 |
|---|---|---|
| committer | lsces <lester@lsces.co.uk> | 2014-06-07 07:46:37 +0100 |
| commit | e7fc08e5cd9575c05f1dc05af451fb332ff1f277 (patch) | |
| tree | 3ebf38e62e610423456a83a1ef5476013c86d7a2 /samples/api.html | |
| parent | e530e13afe58ed0644b6a7f177b679926c137609 (diff) | |
| download | ckeditor-e7fc08e5cd9575c05f1dc05af451fb332ff1f277.tar.gz ckeditor-e7fc08e5cd9575c05f1dc05af451fb332ff1f277.tar.bz2 ckeditor-e7fc08e5cd9575c05f1dc05af451fb332ff1f277.zip | |
Upgrade to version 4.3
Diffstat (limited to 'samples/api.html')
| -rwxr-xr-x[-rw-r--r--] | samples/api.html | 414 |
1 files changed, 207 insertions, 207 deletions
diff --git a/samples/api.html b/samples/api.html index 9d51ef7..fc14165 100644..100755 --- a/samples/api.html +++ b/samples/api.html @@ -1,207 +1,207 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. -For licensing, see LICENSE.html or http://ckeditor.com/license ---> -<html> -<head> - <meta charset="utf-8"> - <title>API Usage — CKEditor Sample</title> - <script src="../ckeditor.js"></script> - <link href="sample.css" rel="stylesheet"> - <script> - -// The instanceReady event is fired, when an instance of CKEditor has finished -// its initialization. -CKEDITOR.on( 'instanceReady', function( ev ) { - // Show the editor name and description in the browser status bar. - document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.'; - - // Show this sample buttons. - document.getElementById( 'eButtons' ).style.display = 'block'; -}); - -function InsertHTML() { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - var value = document.getElementById( 'htmlArea' ).value; - - // Check the active editing mode. - if ( editor.mode == 'wysiwyg' ) - { - // Insert HTML code. - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml - editor.insertHtml( value ); - } - else - alert( 'You must be in WYSIWYG mode!' ); -} - -function InsertText() { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - var value = document.getElementById( 'txtArea' ).value; - - // Check the active editing mode. - if ( editor.mode == 'wysiwyg' ) - { - // Insert as plain text. - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText - editor.insertText( value ); - } - else - alert( 'You must be in WYSIWYG mode!' ); -} - -function SetContents() { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - var value = document.getElementById( 'htmlArea' ).value; - - // Set editor contents (replace current contents). - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData - editor.setData( value ); -} - -function GetContents() { - // Get the editor instance that you want to interact with. - var editor = CKEDITOR.instances.editor1; - - // Get editor contents - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData - alert( editor.getData() ); -} - -function ExecuteCommand( commandName ) { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - - // Check the active editing mode. - if ( editor.mode == 'wysiwyg' ) - { - // Execute the command. - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand - editor.execCommand( commandName ); - } - else - alert( 'You must be in WYSIWYG mode!' ); -} - -function CheckDirty() { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - // Checks whether the current editor contents present changes when compared - // to the contents loaded into the editor at startup - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty - alert( editor.checkDirty() ); -} - -function ResetDirty() { - // Get the editor instance that we want to interact with. - var editor = CKEDITOR.instances.editor1; - // Resets the "dirty state" of the editor (see CheckDirty()) - // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty - editor.resetDirty(); - alert( 'The "IsDirty" status has been reset' ); -} - -function Focus() { - CKEDITOR.instances.editor1.focus(); -} - -function onFocus() { - document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>'; -} - -function onBlur() { - document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus'; -} - - </script> - -</head> -<body> - <h1 class="samples"> - <a href="index.html">CKEditor Samples</a> » Using CKEditor JavaScript API - </h1> - <div class="description"> - <p> - This sample shows how to use the - <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a> - to interact with the editor at runtime. - </p> - <p> - For details on how to create this setup check the source code of this sample page. - </p> - </div> - - <!-- This <div> holds alert messages to be display in the sample page. --> - <div id="alerts"> - <noscript> - <p> - <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript - support, like yours, you should still see the contents (HTML data) and you should - be able to edit it normally, without a rich editor interface. - </p> - </noscript> - </div> - <form action="../../../samples/sample_posteddata.php" method="post"> - <textarea cols="100" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> - - <script> - // Replace the <textarea id="editor1"> with an CKEditor instance. - CKEDITOR.replace( 'editor1', { - on: { - focus: onFocus, - blur: onBlur, - - // Check for availability of corresponding plugins. - pluginsLoaded: function( evt ) { - var doc = CKEDITOR.document, ed = evt.editor; - if ( !ed.getCommand( 'bold' ) ) - doc.getById( 'exec-bold' ).hide(); - if ( !ed.getCommand( 'link' ) ) - doc.getById( 'exec-link' ).hide(); - } - } - }); - </script> - - <p id="eMessage"> - </p> - - <div id="eButtons" style="display: none"> - <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command"> - <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command"> - <input onclick="Focus();" type="button" value="Focus"> - <br><br> - <input onclick="InsertHTML();" type="button" value="Insert HTML"> - <input onclick="SetContents();" type="button" value="Set Editor Contents"> - <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)"> - <br> - <textarea cols="100" id="htmlArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML code.</p></textarea> - <br> - <br> - <input onclick="InsertText();" type="button" value="Insert Text"> - <br> - <textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces. - -Second line of text preceded by two line breaks.</textarea> - <br> - <br> - <input onclick="CheckDirty();" type="button" value="checkDirty()"> - <input onclick="ResetDirty();" type="button" value="resetDirty()"> - </div> - </form> - <div id="footer"> - <hr> - <p> - CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> - </p> - <p id="copy"> - Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico - Knabben. All rights reserved. - </p> - </div> -</body> -</html> +<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>API Usage — CKEditor Sample</title>
+ <script src="../ckeditor.js"></script>
+ <link href="sample.css" rel="stylesheet">
+ <script>
+
+// The instanceReady event is fired, when an instance of CKEditor has finished
+// its initialization.
+CKEDITOR.on( 'instanceReady', function( ev ) {
+ // Show the editor name and description in the browser status bar.
+ document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
+
+ // Show this sample buttons.
+ document.getElementById( 'eButtons' ).style.display = 'block';
+});
+
+function InsertHTML() {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'htmlArea' ).value;
+
+ // Check the active editing mode.
+ if ( editor.mode == 'wysiwyg' )
+ {
+ // Insert HTML code.
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
+ editor.insertHtml( value );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function InsertText() {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'txtArea' ).value;
+
+ // Check the active editing mode.
+ if ( editor.mode == 'wysiwyg' )
+ {
+ // Insert as plain text.
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
+ editor.insertText( value );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function SetContents() {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'htmlArea' ).value;
+
+ // Set editor contents (replace current contents).
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
+ editor.setData( value );
+}
+
+function GetContents() {
+ // Get the editor instance that you want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+
+ // Get editor contents
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
+ alert( editor.getData() );
+}
+
+function ExecuteCommand( commandName ) {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+
+ // Check the active editing mode.
+ if ( editor.mode == 'wysiwyg' )
+ {
+ // Execute the command.
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
+ editor.execCommand( commandName );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function CheckDirty() {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+ // Checks whether the current editor contents present changes when compared
+ // to the contents loaded into the editor at startup
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
+ alert( editor.checkDirty() );
+}
+
+function ResetDirty() {
+ // Get the editor instance that we want to interact with.
+ var editor = CKEDITOR.instances.editor1;
+ // Resets the "dirty state" of the editor (see CheckDirty())
+ // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
+ editor.resetDirty();
+ alert( 'The "IsDirty" status has been reset' );
+}
+
+function Focus() {
+ CKEDITOR.instances.editor1.focus();
+}
+
+function onFocus() {
+ document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
+}
+
+function onBlur() {
+ document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
+}
+
+ </script>
+
+</head>
+<body>
+ <h1 class="samples">
+ <a href="index.html">CKEditor Samples</a> » Using CKEditor JavaScript API
+ </h1>
+ <div class="description">
+ <p>
+ This sample shows how to use the
+ <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
+ to interact with the editor at runtime.
+ </p>
+ <p>
+ For details on how to create this setup check the source code of this sample page.
+ </p>
+ </div>
+
+ <!-- This <div> holds alert messages to be display in the sample page. -->
+ <div id="alerts">
+ <noscript>
+ <p>
+ <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
+ support, like yours, you should still see the contents (HTML data) and you should
+ be able to edit it normally, without a rich editor interface.
+ </p>
+ </noscript>
+ </div>
+ <form action="../../../samples/sample_posteddata.php" method="post">
+ <textarea cols="100" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
+
+ <script>
+ // Replace the <textarea id="editor1"> with an CKEditor instance.
+ CKEDITOR.replace( 'editor1', {
+ on: {
+ focus: onFocus,
+ blur: onBlur,
+
+ // Check for availability of corresponding plugins.
+ pluginsLoaded: function( evt ) {
+ var doc = CKEDITOR.document, ed = evt.editor;
+ if ( !ed.getCommand( 'bold' ) )
+ doc.getById( 'exec-bold' ).hide();
+ if ( !ed.getCommand( 'link' ) )
+ doc.getById( 'exec-link' ).hide();
+ }
+ }
+ });
+ </script>
+
+ <p id="eMessage">
+ </p>
+
+ <div id="eButtons" style="display: none">
+ <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command">
+ <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command">
+ <input onclick="Focus();" type="button" value="Focus">
+ <br><br>
+ <input onclick="InsertHTML();" type="button" value="Insert HTML">
+ <input onclick="SetContents();" type="button" value="Set Editor Contents">
+ <input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
+ <br>
+ <textarea cols="100" id="htmlArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML code.</p></textarea>
+ <br>
+ <br>
+ <input onclick="InsertText();" type="button" value="Insert Text">
+ <br>
+ <textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces.
+
+Second line of text preceded by two line breaks.</textarea>
+ <br>
+ <br>
+ <input onclick="CheckDirty();" type="button" value="checkDirty()">
+ <input onclick="ResetDirty();" type="button" value="resetDirty()">
+ </div>
+ </form>
+ <div id="footer">
+ <hr>
+ <p>
+ CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+ </p>
+ <p id="copy">
+ Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+ Knabben. All rights reserved.
+ </p>
+ </div>
+</body>
+</html>
|
