2021-07-10 19:18:17 +01:00
<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
< html >
< head >
2021-07-26 17:42:43 -04:00
< 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 >
2021-07-10 19:18:17 +01:00
< / head >
< body >
2021-07-26 17:42:43 -04:00
< 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.
2021-07-10 19:18:17 +01:00
Second line of text preceded by two line breaks.< / textarea >
2021-07-26 17:42:43 -04:00
< 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 >
2021-07-10 19:18:17 +01:00
< / body >
< / html >
