Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
156 lines (134 sloc) 7.5 KB
<!DOCTYPE html>
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see or
<meta charset="utf-8">
<meta name="description" content="Getting Data from CKEditor in Ajax Applications.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, ajax, data, getting, get, save, saving, submitting, submit, content, configure, configuration, setup, settings, options, customization, customize, customise, customisation, config, modification, modify, change">
<meta name="sdk-samples" content="Creating and destroying CKEditor on the fly|The &lt;code&gt;change&lt;/code&gt; event">
<meta name="sdk-category" content="sdk-saving-data">
<meta name="sdk-order" content="20">
<title>Saving in Ajax Applications</title>
<link href=",500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/sample.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<link rel="icon" href="../template/theme/img/favicon.ico">
<header class="sdk-header">
<section class="sdk-container">
<nav class="sdk-sidebar">
<section class="sdk-contents">
<script data-sample="1">
var editor1, html = '';
function createEditor() {
if ( editor1 )
// Create a new editor instance inside the <div id="editor"> element,
// setting its value to html.
var config = {};
editor1 = CKEDITOR.appendTo( 'editor1', config, html );
// Update button states.
document.getElementById( 'remove' ).style.display = '';
document.getElementById( 'create' ).style.display = 'none';
function removeEditor() {
if ( !editor1 )
// Retrieve the editor content. In an Ajax application this data would be
// sent to the server or used in any other way.
html = editor1.getData();
// Update <div> with "Edited Content".
document.getElementById( 'editorcontent1' ).innerHTML = html;
// Show <div> with "Edited Content".
document.getElementById( 'content1' ).style.display = '';
// Update button states.
document.getElementById( 'remove' ).style.display = 'none';
document.getElementById( 'create' ).style.display = '';
// Destroy the editor.
editor1 = null;
<h1>CKEditor in Ajax Applications <a class="documentation" href="">Documentation</a></h1>
<div class="description">
With <a href="./inline.html">inline editing</a> and possibility to create and destroy CKEditor instances dynamically, CKEditor is a perfect match for Ajax applications. Getting updated data from
CKEditor is easy thanks to rich JavaScript API. It is also possible to detect whenever a change is made in the editor thanks to the
<code><a href="">change</a></code> event, which makes additional features like auto-saving really easy to develop.
<h2 class="editor-title">Creating and Destroying CKEditor on the Fly</h2>
<p>In this example CKEditor is created dynamically after pressing the "Create Editor" button. After pressing the "Remove Editor" button the editor content is passed to a dedicated <code>&lt;div&gt;</code> element and CKEditor is removed.</p>
<p>This functionality is achieved using just three simple methods: <code><a href="">CKEDITOR.appendTo()</a></code>, <code><a href="">editor.getData()</a></code> and <code><a href="">editor.destroy()</a></code>.</p>
<p data-sample="1">
<input onclick="createEditor();" type="button" value="Create Editor" id="create">
<input onclick="removeEditor();" type="button" value="Remove Editor" id="remove" style="display:none">
<!-- This <div> will store the editor. -->
<div id="editor1" data-sample="1">
<div id="content1" style="display: none" data-sample="1">
<h3>Edited Content</h3>
<!-- This <div> will be used to display the editor content. -->
<div id="editorcontent1">
<h2 class="editor-title">The <code>change</code> Event</h2>
<p>Whenever a change is made in the editor, CKEditor fires a <code><a href="">change</a></code> event, which makes it possible to auto-save data on the fly. In the example below the <code>change</code> event is used to mirror entered content below the editor. To see it in action, start typing in the editing area.</p>
<textarea cols="80" id="editor2" name="editor2" rows="10" data-sample="2">
<div id="content2" style="display: none" data-sample="2">
<p>The number of <code>change</code> events: <strong><span id="changes"></span></strong>.</p>
<h3>Mirrored Content</h3>
<!-- This <div> will be used to display the editor content. -->
<div id="editorcontent2">
<div class="tip">
Saving data is a server-side operation and you are free to implement the save functionality on your own, in any way you like. CKEditor is a pure JavaScript component and it does not offer anything more than JavaScript methods and events to access the data so that you could save it on the server.
Be aware that a <strong><a href="">Save</a></strong> plugin for CKEditor is available. It provides the <span class="button_icon" data-icon="save" title="Save">&nbsp;</span> button, which fires a <code><a href="">save</a></code> event, but it currently works only for classic editor placed inside the <code>&lt;form&gt;</code> element. If you would like to use the <strong>Save</strong> button to save data without reloading the page, e.g. in an Ajax application using inline editor, check <a href="">the documentation about saving data</a>.
<h2>Related Features</h2>
<li><a href="./classic.html">Editor Types &ndash; Classic Editor</a></li>
<li><a href="./inline.html">Editor Types &ndash; Inline Editor</a></li>
<li><a href="./savetextarea.html">Saving Data &ndash; Saving Data in CKEditor Replacing a Textarea</a></li>
<script data-sample="2">
(function () {
var changesCount = 0;
var editor2 = CKEDITOR.replace( 'editor2', {
removePlugins: 'sourcearea'
} );
editor2.on( 'change', function ( ev ) {
document.getElementById( 'content2' ).style.display = '';
document.getElementById( 'changes' ).innerHTML = changesCount.toString();
document.getElementById( 'editorcontent2' ).innerHTML = editor2.getData();
} );
<footer class="sdk-footer">
You can’t perform that action at this time.