2010-05-03 23:49:57 -07:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
2011-05-16 20:19:32 -07:00
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
2010-05-03 23:49:57 -07:00
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
2011-05-16 20:19:32 -07:00
< title > API Usage — CKEditor Sample< / title >
2010-05-03 23:49:57 -07:00
< meta content = "text/html; charset=utf-8" http-equiv = "content-type" / >
< script type = "text/javascript" src = "../ckeditor.js" > < / script >
< script src = "sample.js" type = "text/javascript" > < / script >
< link href = "sample.css" rel = "stylesheet" type = "text/css" / >
< script type = "text/javascript" >
//< ![CDATA[
2011-05-16 20:19:32 -07:00
// The instanceReady event is fired, when an instance of CKEditor has finished
2010-05-03 23:49:57 -07:00
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
// Show the editor name and description in the browser status bar.
2011-05-16 20:19:32 -07:00
document.getElementById( 'eMessage' ).innerHTML = '< p > Instance < code > ' + ev.editor.name + '< \/code> loaded.< \/p>';
2010-05-03 23:49:57 -07:00
// Show this sample buttons.
2011-05-16 20:19:32 -07:00
document.getElementById( 'eButtons' ).style.display = 'block';
2010-05-03 23:49:57 -07:00
});
function InsertHTML()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
2011-05-16 20:19:32 -07:00
var value = document.getElementById( 'htmlArea' ).value;
2010-05-03 23:49:57 -07:00
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
2011-05-16 20:19:32 -07:00
// Insert HTML code.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
2010-05-03 23:49:57 -07:00
oEditor.insertHtml( value );
}
else
2011-05-16 20:19:32 -07:00
alert( 'You must be in WYSIWYG mode!' );
}
function InsertText()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'txtArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert as plain text.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText
oEditor.insertText( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
2010-05-03 23:49:57 -07:00
}
function SetContents()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
2011-05-16 20:19:32 -07:00
var value = document.getElementById( 'htmlArea' ).value;
2010-05-03 23:49:57 -07:00
2011-05-16 20:19:32 -07:00
// Set editor contents (replace current contents).
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
2010-05-03 23:49:57 -07:00
oEditor.setData( value );
}
function GetContents()
{
2011-05-16 20:19:32 -07:00
// Get the editor instance that you want to interact with.
2010-05-03 23:49:57 -07:00
var oEditor = CKEDITOR.instances.editor1;
2011-05-16 20:19:32 -07:00
// Get editor contents
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
2010-05-03 23:49:57 -07:00
alert( oEditor.getData() );
}
2011-05-16 20:19:32 -07:00
function ExecuteCommand( commandName )
2010-05-03 23:49:57 -07:00
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Execute the command.
2011-05-16 20:19:32 -07:00
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
2010-05-03 23:49:57 -07:00
oEditor.execCommand( commandName );
}
else
2011-05-16 20:19:32 -07:00
alert( 'You must be in WYSIWYG mode!' );
2010-05-03 23:49:57 -07:00
}
function CheckDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
2011-05-16 20:19:32 -07:00
// Checks whether the current editor contents present changes when compared
// to the contents loaded into the editor at startup
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty
2010-05-03 23:49:57 -07:00
alert( oEditor.checkDirty() );
}
function ResetDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
2011-05-16 20:19:32 -07:00
// Resets the "dirty state" of the editor (see CheckDirty())
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
2010-05-03 23:49:57 -07:00
oEditor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
//]]>
< / script >
< / head >
< body >
2011-05-16 20:19:32 -07:00
< h1 class = "samples" >
CKEditor Sample — Using CKEditor JavaScript API
2010-05-03 23:49:57 -07:00
< / h1 >
2011-05-16 20:19:32 -07:00
< div class = "description" >
< p >
This sample shows how to use the
< a class = "samples" href = "http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html" > 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 >
2010-05-03 23:49:57 -07:00
<!-- 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 = "sample_posteddata.php" method = "post" >
2011-05-16 20:19:32 -07:00
< 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 >
2010-05-03 23:49:57 -07:00
< script type = "text/javascript" >
//< ![CDATA[
// Replace the < textarea id = "editor1" > with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1' );
//]]>
< / script >
< div id = "eMessage" >
< / div >
2011-05-16 20:19:32 -07:00
< div id = "eButtons" style = "display: none" >
2010-05-03 23:49:57 -07:00
< 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 (XHTML)" / >
< br / >
2011-05-16 20:19:32 -07:00
< 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 / >
2010-05-03 23:49:57 -07:00
< br / >
2011-05-16 20:19:32 -07:00
< 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 >
2010-05-03 23:49:57 -07:00
< br / >
< input onclick = "ExecuteCommand('bold');" type = "button" value = "Execute "bold" Command" / >
< input onclick = "ExecuteCommand('link');" type = "button" value = "Execute "link" Command" / >
< br / >
< br / >
< input onclick = "CheckDirty();" type = "button" value = "checkDirty()" / >
< input onclick = "ResetDirty();" type = "button" value = "resetDirty()" / >
< / div >
< / form >
< div id = "footer" >
< hr / >
< p >
2011-05-16 20:19:32 -07:00
CKEditor - The text editor for the Internet - < a class = "samples" href = "http://ckeditor.com/" > http://ckeditor.com< / a >
2010-05-03 23:49:57 -07:00
< / p >
< p id = "copy" >
2011-05-16 20:19:32 -07:00
Copyright © 2003-2011, < a class = "samples" href = "http://cksource.com/" > CKSource< / a > - Frederico
2010-05-03 23:49:57 -07:00
Knabben. All rights reserved.
< / p >
< / div >
< / body >
< / html >
