<!DOCTYPE html>
<!--
Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-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.
// https://docs.ckeditor.com/ckeditor4/docs/#!/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.
// https://docs.ckeditor.com/ckeditor4/docs/#!/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).
// https://docs.ckeditor.com/ckeditor4/docs/#!/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
// https://docs.ckeditor.com/ckeditor4/docs/#!/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.
// https://docs.ckeditor.com/ckeditor4/docs/#!/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
// https://docs.ckeditor.com/ckeditor4/docs/#!/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())
// https://docs.ckeditor.com/ckeditor4/docs/#!/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 = "warning deprecated" >
This sample is not maintained anymore. Check out its < a href = "https://sdk.ckeditor.com/samples/api.html" > brand new version in CKEditor SDK< / a > .
< / div >
< div class = "description" >
< p >
This sample shows how to use the
< a class = "samples" href = "https://docs.ckeditor.com/ckeditor4/docs/#!/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="https://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 = "https://ckeditor.com/" > https://ckeditor.com< / a >
< / p >
< p id = "copy" >
Copyright © 2003-2018, < a class = "samples" href = "https://cksource.com/" > CKSource< / a > - Frederico
Knabben. All rights reserved.
< / p >
< / div >
< / body >
< / html >
