crossreference-demo: ckeditor/samples/old/ajax.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>Ajax &mdash; CKEditor Sample</title>

    10 	<script src="../../ckeditor.js"></script>

    11 	<link rel="stylesheet" href="sample.css">

    12 	<script>

    14 		var editor, html = '';

    16 		function createEditor() {

    17 			if ( editor )

    18 				return;

    20 			// Create a new editor inside the <div id="editor">, setting its value to html

    21 			var config = {};

    22 			editor = CKEDITOR.appendTo( 'editor', config, html );

    23 		}

    25 		function removeEditor() {

    26 			if ( !editor )

    27 				return;

    29 			// Retrieve the editor contents. In an Ajax application, this data would be

    30 			// sent to the server or used in any other way.

    31 			document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();

    32 			document.getElementById( 'contents' ).style.display = '';

    34 			// Destroy the editor.

    35 			editor.destroy();

    36 			editor = null;

    37 		}

    39 	</script>

    40 </head>

    41 <body>

    42 	<h1 class="samples">

    43 		<a href="index.html">CKEditor Samples</a> &raquo; Create and Destroy Editor Instances for Ajax Applications

    44 	</h1>

    45 	<div class="warning deprecated">

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

    47 	</div>

    48 	<div class="description">

    49 		<p>

    50 			This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing

    51 			area will be displayed in a <code>&lt;div&gt;</code> element.

    52 		</p>

    53 		<p>

    54 			For details of how to create this setup check the source code of this sample page

    55 			for JavaScript code responsible for the creation and destruction of a CKEditor instance.

    56 		</p>

    57 	</div>

    58 	<p>Click the buttons to create and remove a CKEditor instance.</p>

    59 	<p>

    60 		<input onclick="createEditor();" type="button" value="Create Editor">

    61 		<input onclick="removeEditor();" type="button" value="Remove Editor">

    62 	</p>

    63 	<!-- This div will hold the editor. -->

    64 	<div id="editor">

    65 	</div>

    66 	<div id="contents" style="display: none">

    67 		<p>

    68 			Edited Contents:

    69 		</p>

    70 		<!-- This div will be used to display the editor contents. -->

    71 		<div id="editorcontents">

    72 		</div>

    73 	</div>

    74 	<div id="footer">

    75 		<hr>

    76 		<p>

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

    78 		</p>

    79 		<p id="copy">

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

    81 			Knabben. All rights reserved.

    82 		</p>

    83 	</div>

    84 </body>

    85 </html>

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