diff options
Diffstat (limited to '_samples/api.html')
| -rw-r--r-- | _samples/api.html | 344 |
1 files changed, 192 insertions, 152 deletions
diff --git a/_samples/api.html b/_samples/api.html index 206348d..aa858cd 100644 --- a/_samples/api.html +++ b/_samples/api.html @@ -1,152 +1,192 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<!-- -Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. -For licensing, see LICENSE.html or http://ckeditor.com/license ---> -<html xmlns="http://www.w3.org/1999/xhtml"> -<head> - <title>API usage - CKEditor Sample</title> - <meta content="text/html; charset=utf-8" http-equiv="content-type" /> - <script type="text/javascript" src="../ckeditor.js"></script> - <script src="sample.js" type="text/javascript"></script> - <link href="sample.css" rel="stylesheet" type="text/css" /> - <script type="text/javascript"> - //<![CDATA[ - -// 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 = '<p>Instance "' + ev.editor.name + '" loaded.<\/p>'; - - // Show this sample buttons. - document.getElementById( 'eButtons' ).style.visibility = ''; -}); - -function InsertHTML() -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - var value = document.getElementById( 'plainArea' ).value; - - // Check the active editing mode. - if ( oEditor.mode == 'wysiwyg' ) - { - // Insert the desired HTML. - oEditor.insertHtml( value ); - } - else - alert( 'You must be on WYSIWYG mode!' ); -} - -function SetContents() -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - var value = document.getElementById( 'plainArea' ).value; - - // Set the editor contents (replace the actual one). - oEditor.setData( value ); -} - -function GetContents() -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - - // Get the editor contents - alert( oEditor.getData() ); -} - -function ExecuteCommand(commandName) -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - - // Check the active editing mode. - if ( oEditor.mode == 'wysiwyg' ) - { - // Execute the command. - oEditor.execCommand( commandName ); - } - else - alert( 'You must be on WYSIWYG mode!' ); -} - -function CheckDirty() -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - alert( oEditor.checkDirty() ); -} - -function ResetDirty() -{ - // Get the editor instance that we want to interact with. - var oEditor = CKEDITOR.instances.editor1; - oEditor.resetDirty(); - alert( 'The "IsDirty" status has been reset' ); -} - - //]]> - </script> - -</head> -<body> - <h1> - CKEditor Sample - </h1> - <!-- 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="sample_posteddata.php" method="post"> - <p> - This sample shows how to use the CKeditor JavaScript API to interact with the editor - at runtime.</p> - <textarea cols="80" 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 type="text/javascript"> - //<![CDATA[ - // Replace the <textarea id="editor1"> with an CKEditor instance. - var editor = CKEDITOR.replace( 'editor1' ); - //]]> - </script> - - <div id="eMessage"> - </div> - <div id="eButtons" style="visibility: hidden"> - <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="80" id="plainArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML</p></textarea> - <br /> - <br /> - <input onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command" /> - <input onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command" /> - <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 Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a> - </p> - <p id="copy"> - Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico - Knabben. All rights reserved. - </p> - </div> -</body> -</html> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>API Usage — CKEditor Sample</title>
+ <meta content="text/html; charset=utf-8" http-equiv="content-type" />
+ <script type="text/javascript" src="../ckeditor.js"></script>
+ <script src="sample.js" type="text/javascript"></script>
+ <link href="sample.css" rel="stylesheet" type="text/css" />
+ <script type="text/javascript">
+ //<![CDATA[
+
+// 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 = '<p>Instance <code>' + ev.editor.name + '<\/code> loaded.<\/p>';
+
+ // Show this sample buttons.
+ document.getElementById( 'eButtons' ).style.display = 'block';
+});
+
+function InsertHTML()
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'htmlArea' ).value;
+
+ // Check the active editing mode.
+ if ( oEditor.mode == 'wysiwyg' )
+ {
+ // Insert HTML code.
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
+ oEditor.insertHtml( value );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function InsertText()
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'txtArea' ).value;
+
+ // Check the active editing mode.
+ if ( oEditor.mode == 'wysiwyg' )
+ {
+ // Insert as plain text.
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText
+ oEditor.insertText( value );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function SetContents()
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+ var value = document.getElementById( 'htmlArea' ).value;
+
+ // Set editor contents (replace current contents).
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
+ oEditor.setData( value );
+}
+
+function GetContents()
+{
+ // Get the editor instance that you want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+
+ // Get editor contents
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
+ alert( oEditor.getData() );
+}
+
+function ExecuteCommand( commandName )
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+
+ // Check the active editing mode.
+ if ( oEditor.mode == 'wysiwyg' )
+ {
+ // Execute the command.
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
+ oEditor.execCommand( commandName );
+ }
+ else
+ alert( 'You must be in WYSIWYG mode!' );
+}
+
+function CheckDirty()
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+ // Checks whether the current editor contents present changes when compared
+ // to the contents loaded into the editor at startup
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty
+ alert( oEditor.checkDirty() );
+}
+
+function ResetDirty()
+{
+ // Get the editor instance that we want to interact with.
+ var oEditor = CKEDITOR.instances.editor1;
+ // Resets the "dirty state" of the editor (see CheckDirty())
+ // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
+ oEditor.resetDirty();
+ alert( 'The "IsDirty" status has been reset' );
+}
+
+ //]]>
+ </script>
+
+</head>
+<body>
+ <h1 class="samples">
+ CKEditor Sample — Using CKEditor JavaScript API
+ </h1>
+ <div class="description">
+ <p>
+ This sample shows how to use the
+ <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html">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="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 type="text/javascript">
+ //<![CDATA[
+ // Replace the <textarea id="editor1"> with an CKEditor instance.
+ var editor = CKEDITOR.replace( 'editor1' );
+ //]]>
+ </script>
+
+ <div id="eMessage">
+ </div>
+ <div id="eButtons" style="display: none">
+ <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 />
+ <input onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command" />
+ <input onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command" />
+ <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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+ Knabben. All rights reserved.
+ </p>
+ </div>
+</body>
+</html>
|