crossreference-demo: ckeditor/samples/old/api.html@44d330dccc59

     1 <!DOCTYPE html>

     2 <!--

     3 Copyright (c) 2003-2016, 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>

    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.';

    20 	// Show this sample buttons.

    21 	document.getElementById( 'eButtons' ).style.display = 'block';

    22 });

    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;

    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 }

    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;

    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 }

    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;

    61 	// Set editor contents (replace current contents).

    62 	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData

    63 	editor.setData( value );

    64 }

    66 function GetContents() {

    67 	// Get the editor instance that you want to interact with.

    68 	var editor = CKEDITOR.instances.editor1;

    70 	// Get editor contents

    71 	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData

    72 	alert( editor.getData() );

    73 }

    75 function ExecuteCommand( commandName ) {

    76 	// Get the editor instance that we want to interact with.

    77 	var editor = CKEDITOR.instances.editor1;

    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 }

    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 }

    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 }

   108 function Focus() {

   109 	CKEDITOR.instances.editor1.focus();

   110 }

   112 function onFocus() {

   113 	document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';

   114 }

   116 function onBlur() {

   117 	document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';

   118 }

   120 	</script>

   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="warning deprecated">

   128 		This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.

   129 	</div>

   130 	<div class="description">

   131 	<p>

   132 		This sample shows how to use the

   133 		<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>

   134 		to interact with the editor at runtime.

   135 	</p>

   136 	<p>

   137 		For details on how to create this setup check the source code of this sample page.

   138 	</p>

   139 	</div>

   141 	<!-- This <div> holds alert messages to be display in the sample page. -->

   142 	<div id="alerts">

   143 		<noscript>

   144 			<p>

   145 				<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript

   146 				support, like yours, you should still see the contents (HTML data) and you should

   147 				be able to edit it normally, without a rich editor interface.

   148 			</p>

   149 		</noscript>

   150 	</div>

   151 	<form action="../../../samples/sample_posteddata.php" method="post">

   152 		<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>

   154 		<script>

   155 			// Replace the <textarea id="editor1"> with an CKEditor instance.

   156 			CKEDITOR.replace( 'editor1', {

   157 				on: {

   158 					focus: onFocus,

   159 					blur: onBlur,

   161 					// Check for availability of corresponding plugins.

   162 					pluginsLoaded: function( evt ) {

   163 						var doc = CKEDITOR.document, ed = evt.editor;

   164 						if ( !ed.getCommand( 'bold' ) )

   165 							doc.getById( 'exec-bold' ).hide();

   166 						if ( !ed.getCommand( 'link' ) )

   167 							doc.getById( 'exec-link' ).hide();

   168 					}

   169 				}

   170 			});

   171 		</script>

   173 		<p id="eMessage">

   174 		</p>

   176 		<div id="eButtons" style="display: none">

   177 			<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">

   178 			<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">

   179 			<input onclick="Focus();" type="button" value="Focus">

   180 			<br><br>

   181 			<input onclick="InsertHTML();" type="button" value="Insert HTML">

   182 			<input onclick="SetContents();" type="button" value="Set Editor Contents">

   183 			<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">

   184 			<br>

   185 			<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>

   186 			<br>

   187 			<br>

   188 			<input onclick="InsertText();" type="button" value="Insert Text">

   189 			<br>

   190 			<textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.

   192 Second line of text preceded by two line breaks.</textarea>

   193 			<br>

   194 			<br>

   195 			<input onclick="CheckDirty();" type="button" value="checkDirty()">

   196 			<input onclick="ResetDirty();" type="button" value="resetDirty()">

   197 		</div>

   198 	</form>

   199 	<div id="footer">

   200 		<hr>

   201 		<p>

   202 			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>

   203 		</p>

   204 		<p id="copy">

   205 			Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico

   206 			Knabben. All rights reserved.

   207 		</p>

   208 	</div>

   209 </body>

   210 </html>

author	indvd00m (gotoindvdum[at]gmail[dot]com)
	Thu, 15 Dec 2016 18:10:20 +0300
changeset 0	44d330dccc59
permissions	-rw-r--r--