<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, 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-2014,
<a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved. </p>
</div>
</body>
</html>