first import

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-08 11:40:19 +02:00
commit 1bc61b12ad
8435 changed files with 1582817 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8" ?>
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>com.ckeditor.air.sample</id>
<name>CKEditor - Adobe AIR Sample Application</name>
<version>1.0</version>
<filename>CKEditor AIR Samples</filename>
<description>This is a sample AIR application of CKEditor.</description>
<copyright>Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.</copyright>
<initialWindow>
<content>_samples/adobeair/sample.html</content>
<title>CKEditor - Adobe AIR Sample</title>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<resizable>true</resizable>
<x>100</x>
<y>80</y>
<width>950</width>
<height>700</height>
<minSize>900 600</minSize>
</initialWindow>
<installFolder>CKEditor/Sample AIR Application</installFolder>
<programMenuFolder>CKEditor/Sample AIR Application</programMenuFolder>
<customUpdateUI>false</customUpdateUI>
<allowBrowserInvocation>false</allowBrowserInvocation>
</application>

View File

@@ -0,0 +1,9 @@
@ECHO OFF
::
:: Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
:: For licensing, see LICENSE.html or http://ckeditor.com/license
::
:: Use this file to quickly run the sample in a Windows environment.
::
adl application.xml ../../

View File

@@ -0,0 +1,8 @@
#!/usr/bin/env bash
# Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
# For licensing, see LICENSE.html or http://ckeditor.com/license
# Use this file to quickly run the sample under Linux.
adl application.xml ../../

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textarea by Code - CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../../ckeditor.js"></script>
<link href="../sample.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { margin: 10px ; }
</style></head>
<body>
<h1 class="samples">
CKEditor - Adobe AIR Sample
</h1>
<p>
This is a sample HTML/JavaScript Adobe AIR application with CKEditor with default features.
</p>
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
//]]>
</script>
</p>
<div id="footer" style="position:absolute;bottom:0;left:0;right:0;width:100%;padding-bottom:10px;">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="#" onclick="window.runtime.flash.net.navigateToURL(new window.runtime.flash.net.URLRequest('http://ckeditor.com/'));return false;">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="#" onclick="window.runtime.flash.net.navigateToURL(new window.runtime.flash.net.URLRequest('http://cksource.com/'));return false;">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,98 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax &mdash; CKEditor Sample</title>
<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[
var editor, html = '';
function createEditor()
{
if ( editor )
return;
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
editor = CKEDITOR.appendTo( 'editor', config, html );
}
function removeEditor()
{
if ( !editor )
return;
// Retrieve the editor contents. In an Ajax application, this data would be
// sent to the server or used in any other way.
document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
document.getElementById( 'contents' ).style.display = '';
// Destroy the editor.
editor.destroy();
editor = null;
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
</h1>
<div class="description">
<p>
This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
area will be displayed in a <code>&lt;div&gt;</code> element.
</p>
<p>
For details of how to create this setup check the source code of this sample page
for JavaScript code responsible for the creation and destruction of a CKEditor instance.
</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>
<p>Click the buttons to create and remove a CKEditor instance.</p>
<p>
<input onclick="createEditor();" type="button" value="Create Editor" />
<input onclick="removeEditor();" type="button" value="Remove Editor" />
</p>
<!-- This div will hold the editor. -->
<div id="editor">
</div>
<div id="contents" style="display: none">
<p>
Edited Contents:</p>
<!-- This div will be used to display the editor contents. -->
<div id="editorcontents">
</div>
</div>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,192 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>API Usage &mdash; CKEditor Sample</title>
<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[
// 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 = '<p>Instance <code>' + ev.editor.name + '<\/code> loaded.<\/p>';
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
oEditor.insertHtml( value );
}
else
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!' );
}
function SetContents()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Set editor contents (replace current contents).
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
oEditor.setData( value );
}
function GetContents()
{
// Get the editor instance that you want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Get editor contents
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
alert( oEditor.getData() );
}
function ExecuteCommand( commandName )
{
// 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.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
oEditor.execCommand( commandName );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function CheckDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// 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
alert( oEditor.checkDirty() );
}
function ResetDirty()
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Resets the "dirty state" of the editor (see CheckDirty())
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
oEditor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using CKEditor JavaScript API
</h1>
<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>
<!-- 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">
<textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1' );
//]]>
</script>
<div id="eMessage">
</div>
<div id="eButtons" style="display: none">
<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 />
<textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</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 />
<input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command" />
<input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command" />
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,198 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
<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" />
<style id="styles" type="text/css">
.cke_button_myDialogCmd .cke_icon
{
display: none !important;
}
.cke_button_myDialogCmd .cke_label
{
display: inline !important;
}
</style>
<script type="text/javascript">
//<![CDATA[
// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if ( dialogName == 'link' )
{
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
// Add a text field to the "info" tab.
infoTab.add( {
type : 'text',
label : 'My Custom Field',
id : 'customField',
'default' : 'Sample!',
validate : function()
{
if ( /\d/.test( this.getValue() ) )
return 'My Custom Field must not contain digits';
}
});
// Remove the "Link Type" combo and the "Browser
// Server" button from the "info" tab.
infoTab.remove( 'linkType' );
infoTab.remove( 'browse' );
// Set the default value for the URL field.
var urlField = infoTab.get( 'url' );
urlField['default'] = 'www.example.com';
// Remove the "Target" tab from the "Link" dialog.
dialogDefinition.removeContents( 'target' );
// Add a new tab to the "Link" dialog.
dialogDefinition.addContents({
id : 'customTab',
label : 'My Tab',
accessKey : 'M',
elements : [
{
id : 'myField1',
type : 'text',
label : 'My Text Field'
},
{
id : 'myField2',
type : 'text',
label : 'Another Text Field'
}
]
});
// Rewrite the 'onFocus' handler to always focus 'url' field.
dialogDefinition.onFocus = function()
{
var urlField = this.getContentElement( 'info', 'url' );
urlField.select();
};
}
});
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using CKEditor Dialog API
</h1>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html">CKEditor Dialog API</a>
to customize CKEditor dialog windows without changing the original editor code.
The following customizations are being done in the example below:
</p>
<ol>
<li><strong>Adding dialog window tabs</strong> &ndash; "My Tab" in the "Link" dialog window.</li>
<li><strong>Removing a dialog window tab</strong> &ndash; "Target" tab from the "Link" dialog window.</li>
<li><strong>Adding dialog window fields</strong> &ndash; "My Custom Field" in the "Link" dialog window.</li>
<li><strong>Removing dialog window fields</strong> &ndash; "Link Type" and "Browse Server" in the "Link"
dialog window.</li>
<li><strong>Setting default values for dialog window fields</strong> &ndash; "URL" field in the
"Link" dialog window. </li>
<li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
</ol>
<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>
<!-- This <fieldset> holds the HTML that you will usually find in your
pages. -->
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor1',
{
// Defines a simpler toolbar to be used in this sample.
// Note that we have added out "MyButton" button here.
toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'MyButton' ] ]
});
// Listen for the "pluginsLoaded" event, so we are sure that the
// "dialog" plugin has been loaded and we are able to do our
// customizations.
editor.on( 'pluginsLoaded', function( ev )
{
// If our custom dialog has not been registered, do that now.
if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
{
// We need to do the following trick to find out the dialog
// definition file URL path. In the real world, you would simply
// point to an absolute path directly, like "/mydir/mydialog.js".
var href = document.location.href.split( '/' );
href.pop();
href.push( 'api_dialog', 'my_dialog.js' );
href = href.join( '/' );
// Finally, register the dialog.
CKEDITOR.dialog.add( 'myDialog', href );
}
// Register the command used to open the dialog.
editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
// Add the a custom toolbar buttons, which fires the above
// command..
editor.ui.addButton( 'MyButton',
{
label : 'My Dialog',
command : 'myDialogCmd'
} );
});
//]]>
</script>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,28 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.dialog.add( 'myDialog', function( editor )
{
return {
title : 'My Dialog',
minWidth : 400,
minHeight : 200,
contents : [
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab',
elements :
[
{
id : 'input1',
type : 'text',
label : 'Input 1'
}
]
}
]
};
} );

View File

@@ -0,0 +1,105 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- 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>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label>Editor 1:</label><br/>
</p>
<%
' Create class instance.
dim editor, initialValue, code, textareaAttributes
set editor = New CKEditor
' Do not print the code directly to the browser, return it instead
editor.returnOutput = true
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Set global configuration (will be used by all instances of CKEditor).
editor.config("width") = 600
' Change default textarea attributes
set textareaAttributes = CreateObject("Scripting.Dictionary")
textareaAttributes.Add "rows", 10
textareaAttributes.Add "cols", 80
Set editor.textareaAttributes = textareaAttributes
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>. You are using <a href=""http://ckeditor.com/"">CKEditor</a>.</p>"
' Create first instance.
code = editor.editor("editor1", initialValue)
response.write code
%>
<p>
<label>Editor 2:</label><br/>
</p>
<%
' Configuration that will be used only by the second editor.
editor.instanceConfig("toolbar") = Array( _
Array( "Source", "-", "Bold", "Italic", "Underline", "Strike" ), _
Array( "Image", "Link", "Unlink", "Anchor" ) _
)
editor.instanceConfig("skin") = "v2"
' Create second instance.
response.write editor.editor("editor2", initialValue)
%>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- 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>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label>Editor 1:</label><br/>
</p>
<%
''
' Adds global event, will hide "Target" tab in Link dialog in all instances.
'
function CKEditorHideLinkTargetTab(editor)
dim functionCode
functionCode = "function (ev) {" & vbcrlf & _
"// Take the dialog name and its definition from the event data" & vbcrlf & _
"var dialogName = ev.data.name;" & vbcrlf & _
"var dialogDefinition = ev.data.definition;" & vbcrlf & _
"" & vbcrlf & _
"// Check if the definition is from the Link dialog." & vbcrlf & _
"if ( dialogName == 'link' )" & vbcrlf & _
" dialogDefinition.removeContents('target')" & vbcrlf & _
"}" & vbcrlf
editor.addGlobalEventHandler "dialogDefinition", functionCode
end function
''
' Adds global event, will notify about opened dialog.
'
function CKEditorNotifyAboutOpenedDialog(editor)
dim functionCode
functionCode = "function (evt) {" & vbcrlf & _
"alert('Loading dialog: ' + evt.data.name);" & vbcrlf & _
"}"
editor.addGlobalEventHandler "dialogDefinition", functionCode
end function
dim editor, initialValue
' Create class instance.
set editor = new CKEditor
' Set configuration option for all editors.
editor.config("width") = 750
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>. You are using <a href=""http://ckeditor.com/"">CKEditor</a>.</p>"
' Event that will be handled only by the first editor.
editor.addEventHandler "instanceReady", "function (evt) { alert('Loaded editor: ' + evt.editor.name );}"
' Create first instance.
editor.editor "editor1", initialValue
' Clear event handlers, instances that will be created later will not have
' the 'instanceReady' listener defined a couple of lines above.
editor.clearEventHandlers empty
%>
<p>
<label>Editor 2:</label><br/>
</p>
<%
' Configuration that will be used only by the second editor.
editor.instanceConfig("width") = 600
editor.instanceConfig("toolbar") = "Basic"
' Add some global event handlers (for all editors).
CKEditorHideLinkTargetTab(editor)
CKEditorNotifyAboutOpenedDialog(editor)
' Event that will be handled only by the second editor.
editor.addInstanceEventHandler "instanceReady", "function (evt) { alert('Loaded second editor: ' + evt.editor.name );}"
' Create second instance.
editor.editor "editor2", initialValue
%>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ASP integration Samples List &mdash; CKEditor</title>
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples List for ASP &mdash; CKEditor Sample
</h1>
<h2 class="samples">
Overview
</h2>
<p>The ckeditor.asp file provides a wrapper to ease the work of creating CKEditor instances from classic Asp.</p>
<p>To use it, you must first include it into your page:
<code>
&lt;!-- #INCLUDE file="../../ckeditor.asp" --&gt;
</code>
Of course, you should adjust the path to make it point to the correct location, and maybe use a full path (with virtual="" instead of file="")
</p>
<p>After that script is included, you can use it in different ways, based on the following pattern:</p>
<ol>
<li>
Create an instance of the CKEditor class:
<pre class="samples">dim editor
set editor = New CKEditor</pre>
</li>
<li>
Set the path to the folder where CKEditor has been installed, by default it will use /ckeditor/
<pre class="samples">editor.basePath = "../../"</pre>
</li>
<li>
Now use one of the three main methods to create the CKEditor instances:
<ul class="samples">
<li>
Replace textarea with id (or name) "editor1".
<pre class="samples">editor.replaceInstance "editor1"</pre>
</li>
<li>
Replace all textareas with CKEditor.
<pre class="samples">editor.replaceAll empty</pre>
</li>
<li>
Create a textarea element and attach CKEditor to it.
<pre class="samples">editor.editor "editor1", initialValue</pre>
</li>
</ul>
</li>
</ol>
<p>Before step 3 you can use a number of methods and properties to adjust the behavior of this class and the CKEditor instances
that will be created:</p>
<ul class="samples">
<li>returnOutput : if set to true, the functions won't dump the code with response.write, but instead they will return it so
you can do anything you want</li>
<li>basePath: location of the CKEditor scripts</li>
<li>initialized: if you set it to true, it means that you have already included the CKEditor.js file into the page and it
doesn't have to be generated again.</li>
<li>textareaAttributes: You can set here a Dictionary object with the attributes that you want to output in the call to the "editor" method.</li>
<li>config: Allows to set config values for all the instances from now on.</li>
<li>instanceConfig: Allows to set config values just for the next instance.</li>
<li>addEventHandler: Adds an event handler for all the instances from now on.</li>
<li>addInstanceEventHandler: Adds an event handler just for the next instance.</li>
<li>addGlobalEventHandler: Adds an event handler for the global CKEDITOR object.</li>
<li>clearEventHandlers: Removes one or all the event handlers from all the instances from now on.</li>
<li>clearInstanceEventHandlers: Removes one or all the event handlers from the next instance.</li>
<li>clearGlobalEventHandlers: Removes one or all the event handlers from the global CKEDITOR object.</li>
</ul>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li><a class="samples" href="replace.asp">Replace existing textareas by code</a></li>
<li><a class="samples" href="replaceall.asp">Replace all textareas by code</a></li>
<li><a class="samples" href="standalone.asp">Create instances in asp</a></li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="advanced.asp">Advanced example</a></li>
<li><a class="samples" href="events.asp">Listening to events</a></li>
</ul>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- 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>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<%
' Create class instance.
dim editor
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Replace textarea with id (or name) "editor1".
editor.replaceInstance "editor1"
%>
</body>
</html>

View File

@@ -0,0 +1,77 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- 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>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2:</label><br/>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<%
' Create class instance.
dim editor
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Replace all textareas with CKEditor.
editor.replaceAll empty
%>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor - Posted Data
</h1>
<table border="1" cellspacing="0" id="outputSample">
<colgroup><col width="100" /></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<%
Dim sForm
For Each sForm in Request.Form
%>
<tr>
<th><%=Server.HTMLEncode( sForm )%></th>
<td><pre class="samples"><%=Server.HTMLEncode( Request.Form(sForm) )%></pre></td>
</tr>
<% Next %>
</table>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<%@ codepage="65001" language="VBScript" %>
<% Option Explicit %>
<!-- #INCLUDE file="../../ckeditor.asp" -->
<%
' You must set "Enable Parent Paths" on your web site
' in order for the above relative include to work.
' Or you can use #INCLUDE VIRTUAL="/full path/ckeditor.asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample
</h1>
<!-- 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>
<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<fieldset title="Output">
<legend>Output</legend>
<form action="sample_posteddata.asp" method="post">
<p>
Editor 1:
</p>
<p>
<%
dim initialValue, editor
' The initial value to be displayed in the editor.
initialValue = "<p>This is some <strong>sample text</strong>.</p>"
' Create class instance.
set editor = New CKEditor
' Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
' editor.basePath = "/ckeditor/"
' If not set, CKEditor will default to /ckeditor/
editor.basePath = "../../"
' Create textarea element and attach CKEditor to it.
editor.editor "editor1", initialValue
%>
<input type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<div id="footer">
<hr />
<p>
CKEditor - The text editor for Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample &mdash; CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor &mdash; Posted Data
</h1>
<table border="1" cellspacing="0" id="outputSample">
<colgroup><col width="100" /></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<?php
if ( isset( $_POST ) )
$postArray = &$_POST ; // 4.1.0 or later, use $_POST
else
$postArray = &$HTTP_POST_VARS ; // prior to 4.1.0, use HTTP_POST_VARS
foreach ( $postArray as $sForm => $value )
{
if ( get_magic_quotes_gpc() )
$postedValue = htmlspecialchars( stripslashes( $value ) ) ;
else
$postedValue = htmlspecialchars( $value ) ;
?>
<tr>
<th style="vertical-align: top"><?php echo htmlspecialchars($sForm); ?></th>
<td><pre class="samples"><?php echo $postedValue?></pre></td>
</tr>
<?php
}
?>
</table>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,204 @@
/*
* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*
* Styles used by the XHTML 1.1 sample page (xhtml.html).
*/
/**
* Basic definitions for the editing area.
*/
body
{
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
color: #000000;
background-color: #ffffff;
padding: 5px;
margin: 0px;
}
/**
* Core styles.
*/
.Bold
{
font-weight: bold;
}
.Italic
{
font-style: italic;
}
.Underline
{
text-decoration: underline;
}
.StrikeThrough
{
text-decoration: line-through;
}
.Subscript
{
vertical-align: sub;
font-size: smaller;
}
.Superscript
{
vertical-align: super;
font-size: smaller;
}
/**
* Font faces.
*/
.FontComic
{
font-family: 'Comic Sans MS';
}
.FontCourier
{
font-family: 'Courier New';
}
.FontTimes
{
font-family: 'Times New Roman';
}
/**
* Font sizes.
*/
.FontSmaller
{
font-size: smaller;
}
.FontLarger
{
font-size: larger;
}
.FontSmall
{
font-size: 8pt;
}
.FontBig
{
font-size: 14pt;
}
.FontDouble
{
font-size: 200%;
}
/**
* Font colors.
*/
.FontColor1
{
color: #ff9900;
}
.FontColor2
{
color: #0066cc;
}
.FontColor3
{
color: #ff0000;
}
.FontColor1BG
{
background-color: #ff9900;
}
.FontColor2BG
{
background-color: #0066cc;
}
.FontColor3BG
{
background-color: #ff0000;
}
/**
* Indentation.
*/
.Indent1
{
margin-left: 40px;
}
.Indent2
{
margin-left: 80px;
}
.Indent3
{
margin-left: 120px;
}
/**
* Alignment.
*/
.JustifyLeft
{
text-align: left;
}
.JustifyRight
{
text-align: right;
}
.JustifyCenter
{
text-align: center;
}
.JustifyFull
{
text-align: justify;
}
/**
* Other.
*/
code
{
font-family: courier, monospace;
background-color: #eeeeee;
padding-left: 1px;
padding-right: 1px;
border: #c0c0c0 1px solid;
}
kbd
{
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}
blockquote
{
color: #808080;
}

View File

@@ -0,0 +1,70 @@
body
{
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #222;
background-color: #fff;
}
/* preserved spaces for rtl list item bullets. (#6249)*/
ol,ul,dl
{
padding-right:40px;
}
h1,h2,h3,h4
{
font-family: Georgia, Times, serif;
}
h1.lightBlue
{
color: #00A6C7;
font-size: 1.8em;
font-weight:normal;
}
h3.green
{
color: #739E39;
font-weight:normal;
}
span.markYellow { background-color: yellow; }
span.markGreen { background-color: lime; }
img.left
{
padding: 5px;
margin-right: 5px;
float:left;
border:2px solid #DDD;
}
img.right
{
padding: 5px;
margin-right: 5px;
float:right;
border:2px solid #DDD;
}
a.green
{
color:#739E39;
}
table.grey
{
background-color : #F5F5F5;
}
table.grey th
{
background-color : #DDD;
}
ul.square
{
list-style-type : square;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,108 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AutoGrow Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using AutoGrow Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>AutoGrow</strong> (<code>autogrow</code>) plugin that lets the editor window expand
and shrink depending on the amount and size of content entered in the editing area.
</p>
<p>
In its default implementation the <strong>AutoGrow feature</strong> can expand the
CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
</p>
<p>
It is also possible to set a maximum height for the editor window. Once CKEditor
editing area reaches the value in pixels specified in the <code>
<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoGrow_maxHeight">autoGrow_maxHeight</a>
</code> configuration setting, scrollbars will be added and the editor window will no longer expand.
</p>
<p>
To add a CKEditor instance using the <code>autogrow</code> plugin and its
<code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'autogrow',</strong>
autoGrow_maxHeight : 800,
// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
removePlugins : 'resize'
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor. The maximum height should
be given in pixels.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>autogrow</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1', {
extraPlugins : 'autogrow',
removePlugins : 'resize'
});
//]]>
</script>
</p>
<p>
<label for="editor2">
CKEditor using the <code>autogrow</code> plugin with maximum height set to 400 pixels:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor2', {
extraPlugins : 'autogrow',
autoGrow_maxHeight : 400,
removePlugins : 'resize'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,125 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BBCode Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; BBCode Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output <a href="http://en.wikipedia.org/wiki/BBCode">BBCode</a> format instead of HTML.
Please note that the editor configuration was modified to reflect what is needed in a BBCode editing environment.
Smiley images, for example, were stripped to the emoticons that are commonly used in some BBCode dialects.
</p>
<p>
Please note that currently there is no standard for the BBCode markup language, so its implementation
for different platforms (message boards, blogs etc.) can vary. This means that before using CKEditor to
output BBCode you may need to adjust the implementation to your own environment.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
a full definition:
</p>
<pre class="samples">
CKEDITOR.replace( 'editor1',
{
<strong>extraPlugins : 'bbcode',</strong>
toolbar :
[
['Source', '-', 'Save','NewPage','-','Undo','Redo'],
['Find','Replace','-','SelectAll','RemoveFormat'],
['Link', 'Unlink', 'Image'],
'/',
['FontSize', 'Bold', 'Italic','Underline'],
['NumberedList','BulletedList','-','Blockquote'],
['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
],
... <i>some other configurations omitted here</i>
}); </pre>
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some [b]sample text[/b]. You are using [url=http://ckeditor.com/]CKEditor[/url].</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using the "bbcode" plugin, shaping some of the
// editor configuration to fit BBCode environment.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'bbcode',
// Remove unused plugins.
removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
// Width and height are not supported in the BBCode format, so object resizing is disabled.
disableObjectResizing : true,
// Define font sizes in percent values.
fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
toolbar :
[
['Source', '-', 'Save','NewPage','-','Undo','Redo'],
['Find','Replace','-','SelectAll','RemoveFormat'],
['Link', 'Unlink', 'Image', 'Smiley','SpecialChar'],
'/',
['Bold', 'Italic','Underline'],
['FontSize'],
['TextColor'],
['NumberedList','BulletedList','-','Blockquote'],
['Maximize']
],
// Strip CKEditor smileys to those commonly used in BBCode.
smiley_images :
[
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
'cry_smile.gif','kiss.gif'
],
smiley_descriptions :
[
'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
'indecision', 'angel', 'cool', 'crying', 'kiss'
]
} );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using DevTools Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Developer Tools Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
information about dialog window elements, including the name of the dialog window,
tab, and UI element. Please note that the tooltip also contains a link to the
<a href="http://docs.cksource.com/ckeditor_api/">CKEditor JavaScript API</a>
documentation for each of the selected elements.
</p>
<p>
This plugin is aimed at developers who would like to customize their CKEditor
instances and create their own plugins. By default it is turned off; it is
usually useful to only turn it on in the development phase. Note that it works with
all CKEditor dialog windows, including the ones that were created by custom plugins.
</p>
<p>
To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'devtools'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' ,
{
extraPlugins : 'devtools'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,154 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace DIV &mdash; CKEditor Sample</title>
<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" />
<style id="styles" type="text/css">
div.editable
{
border: solid 2px Transparent;
padding-left: 15px;
padding-right: 15px;
}
div.editable:hover
{
border-color: black;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function()
{
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
else if ( window.attachEvent )
document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev )
{
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do
{
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
replaceDiv( element );
}
var editor;
function replaceDiv( div )
{
if ( editor )
editor.destroy();
editor = CKEDITOR.replace( div );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace DIV with CKEditor on the Fly
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
with a CKEditor instance on the fly, following user's doubleclick. The content
that was previously placed inside the <code>&lt;div&gt;</code> element will now
be moved into CKEditor editing area.
</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>
<p>
Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
editor instances.</p>
<div class="editable">
<h3>
Part 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<div class="editable">
<h3>
Part 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
<p>
Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
</p>
</div>
<div class="editable">
<h3>
Part 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ENTER Key Configuration &mdash; CKEditor Sample</title>
<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[
var editor;
function changeEnter()
{
// If we already have an editor, let's destroy it first.
if ( editor )
editor.destroy( true );
// Create the editor again, with the appropriate settings.
editor = CKEDITOR.replace( 'editor1',
{
enterMode : Number( document.getElementById( 'xEnter' ).value ),
shiftEnterMode : Number( document.getElementById( 'xShiftEnter' ).value )
});
}
window.onload = changeEnter;
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; ENTER Key Configuration
</h1>
<div class="description">
<p>
This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
to perform actions specified in the
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode"><code>enterMode</code></a>
and <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.shiftEnterMode"><code>shiftEnterMode</code></a>
parameters, respectively.
You can choose from the following options:
</p>
<ul class="samples">
<li><strong><code>ENTER_P</code></strong> &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
<li><strong><code>ENTER_BR</code></strong> &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
<li><strong><code>ENTER_DIV</code></strong> &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
</ul>
<p>
The sample code below shows how to configure CKEditor to create a <code>&lt;div&gt;</code> block when <em>Enter</em> key is pressed.
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>enterMode : CKEDITOR.ENTER_DIV</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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>
<div style="float: left; margin-right: 20px">
When <em>Enter</em> is pressed:<br />
<select id="xEnter" onchange="changeEnter();">
<option selected="selected" value="1">Create a new &lt;P&gt; (recommended)</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option value="2">Break the line with a &lt;BR&gt;</option>
</select>
</div>
<div style="float: left">
When <em>Shift+Enter</em> is pressed:<br />
<select id="xShiftEnter" onchange="changeEnter();">
<option value="1">Create a new &lt;P&gt;</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option selected="selected" value="2">Break the line with a &lt;BR&gt; (recommended)</option>
</select>
</div>
<br style="clear: both" />
<form action="sample_posteddata.php" method="post">
<p>
<br />
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full Page Editing with Document Properties Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Full Page Editing with Document Properties Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to edit entire HTML pages, from the
<code>&lt;html&gt;</code> tag to the <code>&lt;/html&gt;</code> tag.
</p>
<p>
The <strong>Document Properties</strong> (<code>docprops</code>) plugin is also turned on.
This plugin allows you to set the metadata of the page, including the page encoding, margins,
meta tags, or background.
</p>
<p>
The CKEditor instance below is inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>fullPage : true,
extraPlugins : 'docprops'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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="sample_posteddata.php" method="post">
<label for="editor1">
CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
fullPage : true,
extraPlugins : 'docprops'
});
//]]>
</script>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,116 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CKEditor Samples</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link type="text/css" rel="stylesheet" href="sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples Site
</h1>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li>
<a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a><br />
Automatic replacement of all textarea elements of a given class with a CKEditor instance.
</li>
<li><a class="samples" href="replacebycode.html">Replace textarea elements by code</a><br />
Replacement of textarea elements with CKEditor instances by using a JavaScript call.
</li>
<li><a class="samples" href="fullpage.html">Full page support with the Document Properties plugin</a><br />
CKEditor inserted with a JavaScript call and used to edit the whole page from <code>&lt;html&gt;</code> to <code>&lt;/html&gt;</code>.
</li>
</ul>
<h2 class="samples">
Basic Customization
</h2>
<ul class="samples">
<li><a class="samples" href="skins.html">Skins</a><br />
Changing the CKEditor skin by adjusting a single configuration option.
</li>
<li><a class="samples" href="ui_color.html">User Interface color</a><br />
Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.
</li>
<li><a class="samples" href="ui_languages.html">User Interface languages</a><br />
Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.
</li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a><br />
Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.
</li>
<li><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a><br />
Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.
</li>
<li><a class="samples" href="api.html">Basic usage of the API</a><br />
Using the CKEditor JavaScript API to interact with the editor at runtime.
</li>
<li><a class="samples" href="api_dialog.html">Using the JavaScript API to customize dialog windows</a><br />
Using the dialog windows API to customize dialog windows without changing the original editor code.
</li>
<li><a class="samples" href="enterkey.html">Using the "Enter" key in CKEditor</a><br />
Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.
</li>
<li><a class="samples" href="sharedspaces.html">Shared toolbars</a><br />
Displaying multiple editor instances that share the toolbar and/or the elements path.
</li>
<li><a class="samples" href="jqueryadapter.html">jQuery adapter example</a><br />
Using the jQuery adapter to configure CKEditor.
</li>
<li><a class="samples" href="output_xhtml.html">Output XHTML</a><br />
Configuring CKEditor to produce XHTML 1.1 compliant code.
</li>
<li><a class="samples" href="output_html.html">Output HTML</a><br />
Configuring CKEditor to produce legacy HTML 4 code.
</li>
<li><a class="samples" href="output_for_flash.html">Output for Flash</a><br />
Configuring CKEditor to produce HTML code that can be used with Adobe Flash.
</li>
<li><a class="samples" href="readonly.html">Read-only mode</a><br />
Using the readOnly API to block introducing changes to the editor contents.
</li>
</ul>
<h2 class="samples">
Additional plugins
</h2>
<ul class="samples">
<li><a class="samples" href="autogrow.html">AutoGrow plugin</a><br />
Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.
</li>
<li><a class="samples" href="bbcode.html">Output for BBCode</a><br />
Configuring CKEditor to produce BBCode tags instead of HTML.
</li>
<li><a class="samples" href="stylesheetparser.html">Stylesheet Parser plugin</a><br />
Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.
</li>
<li><a class="samples" href="devtools.html">Developer Tools plugin</a><br />
Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.
</li>
<li><a class="samples" href="placeholder.html">Placeholder plugin</a><br />
Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
</li>
<li><a class="samples" href="tableresize.html">TableResize plugin</a><br />
Using the TableResize plugin to enable table column resizing.
</li>
</ul>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Adapter &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="../ckeditor.js"></script>
<script type="text/javascript" src="../adapters/jquery.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
$(function()
{
var config = {
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['UIColor']
]
};
// Initialize the editor.
// Callback function can be passed and executed after full instance creation.
$('.jquery_ckeditor').ckeditor(config);
});
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using jQuery Adapter
</h1>
<div class="description">
<p>
This sample shows how to load CKEditor and configure it using the
<a class="samples" href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter">jQuery adapter</a>.
In this case the jQuery adapter is responsible for transforming a <code>&lt;textarea&gt;</code>
element into a CKEditor instance and setting the configuration of the toolbar.
</p>
<p>
CKEditor instance with custom configuration set in jQuery can be inserted with the
following JavaScript code:
</p>
<pre class="samples">$(function()
{
var config = {
skin:'v2'
};
$('.<em>textarea_class</em>').ckeditor(config);
});</pre>
<p>
Note that <code><em>textarea_class</em></code> in the code above is the
<code>class</code> attribute of the <code>&lt;textarea&gt;</code> element to be replaced with
CKEditor. Any other jQuery selector can be used to match the target element.
</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>
<!-- This <fieldset> holds the HTML that you will usually find in your
pages. -->
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,275 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Output for Flash &mdash; CKEditor Sample</title>
<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" src="assets/swfobject.js"></script>
<script type="text/javascript">
function sendToFlash()
{
var html = CKEDITOR.instances.editor1.getData() ;
var flash = document.getElementById( 'ckFlash' ) ;
flash.setData( html ) ;
}
function init()
{
var so = new SWFObject("assets/output_for_flash.swf", "ckFlash", "550", "400", "8", "#ffffff") ;
so.addParam("wmode", "transparent");
so.write("ckFlashContainer") ;
}
</script>
</head>
<body onload="init()">
<h1 class="samples">
CKEditor Sample &mdash; Producing Flash Compliant HTML Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output
HTML code that can be used with
<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
Adobe Flash</a>.
The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
</p>
<p>
To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
JavaScript call, and define CKEditor features to use HTML elements and attributes.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>
To see how it works, create some content in the editing area of CKEditor on the left
and send it to the Flash object on the right side of the page by using the
<strong>Send to Flash</strong> button.
</p>
<!-- 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>
<hr />
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%">
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
if ( document.location.protocol == 'file:' )
alert( 'Warning: This samples does not work when loaded from local filesystem due to security restrictions implemented in Flash.' +
'\n\nPlease load the sample from a web server instead.') ;
CKEDITOR.replace( 'editor1',
{
height : 300,
width : '100%',
toolbar : [
['Source','-','Bold','Italic','Underline','-','BulletedList','-','Link','Unlink'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
'/',
['Font','FontSize'],
['TextColor','-','About']
],
/*
* Style sheet for the contents
*/
contentsCss : 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
/*
* Quirks doctype
*/
docType : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
/*
* Core styles.
*/
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
coreStyles_underline : { element : 'u'},
/*
* Font face
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style :
{
element : 'font',
attributes : { 'face' : '#(family)' }
},
/*
* Font sizes.
* The CSS part of the font sizes isn't used by Flash, it is there to get the
* font rendered correctly in CKEditor.
*/
fontSize_sizes : '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' },
styles : { 'font-size' : '#(size)px' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : true,
colorButton_foreStyle :
{
element : 'font',
attributes : { 'color' : '#(color)' }
},
colorButton_backStyle :
{
element : 'font',
styles : { 'background-color' : '#(color)' }
},
on : { 'instanceReady' : configureFlashOutput }
});
/*
* Adjust the behavior of the dataProcessor to match the
* requirements of Flash
*/
function configureFlashOutput( ev )
{
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting match Flash expectations
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
dataProcessor.writer.setRules( e,
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
}
dataProcessor.writer.setRules( 'br',
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements :
{
$ : function( element )
{
var style, match, width, height, align;
// Output dimensions of images as width and height
if ( element.name == 'img' )
{
style = element.attributes.style;
if ( style )
{
// Get the width from the style.
match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
height = match && match[1];
if ( width )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' )
{
style = element.attributes.style;
if ( style )
{
// Get the align from the style.
match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );
align = match && match[1];
if ( align )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( element.attributes.style === '' )
delete element.attributes.style;
return element;
}
}
} );
}
//]]>
</script>
<input type="button" value="Send to Flash" onclick="sendToFlash();" />
</td>
<td valign="top" style="padding-left: 15px" id="ckFlashContainer">
</td>
</tr>
</table>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,285 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Compliant Output &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Producing HTML Compliant Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
Traditional HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
</p>
<p>
To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' }
}
// More definitions follow.
});</pre>
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
/*
* Style sheet for the contents
*/
contentsCss : 'body {color:#000; background-color#:FFF;}',
/*
* Simple HTML5 doctype
*/
docType : '<!DOCTYPE HTML>',
/*
* Core styles.
*/
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
coreStyles_underline : { element : 'u'},
coreStyles_strike : { element : 'strike' },
/*
* Font face
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style :
{
element : 'font',
attributes : { 'face' : '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : true,
colorButton_foreStyle :
{
element : 'font',
attributes : { 'color' : '#(color)' }
},
colorButton_backStyle :
{
element : 'font',
styles : { 'background-color' : '#(color)' }
},
/*
* Styles combo.
*/
stylesSet :
[
{ name : 'Computer Code', element : 'code' },
{ name : 'Keyboard Phrase', element : 'kbd' },
{ name : 'Sample Text', element : 'samp' },
{ name : 'Variable', element : 'var' },
{ name : 'Deleted Text', element : 'del' },
{ name : 'Inserted Text', element : 'ins' },
{ name : 'Cited Work', element : 'cite' },
{ name : 'Inline Quotation', element : 'q' }
],
on : { 'instanceReady' : configureHtmlOutput }
});
/*
* Adjust the behavior of the dataProcessor to avoid styles
* and make it look like FCKeditor HTML output.
*/
function configureHtmlOutput( ev )
{
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
dataProcessor.writer.setRules( e,
{
indent : true,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : !dtd[ e ][ '#' ],
breakAfterClose : true
});
}
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements :
{
$ : function( element )
{
// Output dimensions of images as width and height
if ( element.name == 'img' )
{
var style = element.attributes.style;
if ( style )
{
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
var height = match && match[1];
if ( width )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' )
{
style = element.attributes.style;
if ( style )
{
// Get the align from the style.
match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
var align = match && match[1];
if ( align )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( !element.attributes.style )
delete element.attributes.style;
return element;
}
},
attributes :
{
style : function( value, element )
{
// Return #RGB for background and border colors
return convertRGBToHex( value );
}
}
} );
}
/**
* Convert a CSS rgb(R, G, B) color back to #RRGGBB format.
* @param Css style string (can include more than one color
* @return Converted css style.
*/
function convertRGBToHex( cssStyle )
{
return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
{
red = parseInt( red, 10 ).toString( 16 );
green = parseInt( green, 10 ).toString( 16 );
blue = parseInt( blue, 10 ).toString( 16 );
var color = [red, green, blue] ;
// Add padding zeros if the hex value is less than 0x10.
for ( var i = 0 ; i < color.length ; i++ )
color[i] = String( '0' + color[i] ).slice( -2 ) ;
return '#' + color.join( '' ) ;
});
}
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Compliant Output &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Producing XHTML Compliant Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
Deprecated elements (<code>&lt;font&gt;</code>, <code>&lt;u&gt;</code>) or attributes
(<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
</p>
<p>
To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
contentsCss : 'assets/output_xhtml.css',
coreStyles_bold : { element : 'span', attributes : {'class': 'Bold'} },
coreStyles_italic : { element : 'span', attributes : {'class': 'Italic'} },
// More definitions follow.
});</pre>
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;span class="Bold"&gt;sample text&lt;/span&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
/*
* Style sheet for the contents
*/
contentsCss : 'assets/output_xhtml.css',
/*
* Core styles.
*/
coreStyles_bold : { element : 'span', attributes : {'class': 'Bold'} },
coreStyles_italic : { element : 'span', attributes : {'class': 'Italic'}},
coreStyles_underline : { element : 'span', attributes : {'class': 'Underline'}},
coreStyles_strike : { element : 'span', attributes : {'class': 'StrikeThrough'}, overrides : 'strike' },
coreStyles_subscript : { element : 'span', attributes : {'class': 'Subscript'}, overrides : 'sub' },
coreStyles_superscript : { element : 'span', attributes : {'class': 'Superscript'}, overrides : 'sup' },
/*
* Font face
*/
// List of fonts available in the toolbar combo. Each font definition is
// separated by a semi-colon (;). We are using class names here, so each font
// is defined by {Combo Label}/{Class Name}.
font_names : 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
// Define the way font elements will be applied to the document. The "span"
// element will be used. When a font is selected, the font name defined in the
// above list is passed to this definition with the name "Font", being it
// injected in the "class" attribute.
// We must also instruct the editor to replace span elements that are used to
// set the font (Overrides).
font_style :
{
element : 'span',
attributes : { 'class' : '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes : 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
fontSize_style :
{
element : 'span',
attributes : { 'class' : '#(size)' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : false,
colorButton_colors : 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
colorButton_foreStyle :
{
element : 'span',
attributes : { 'class' : '#(color)' }
},
colorButton_backStyle :
{
element : 'span',
attributes : { 'class' : '#(color)BG' }
},
/*
* Indentation.
*/
indentClasses : ['Indent1', 'Indent2', 'Indent3'],
/*
* Paragraph justification.
*/
justifyClasses : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
/*
* Styles combo.
*/
stylesSet :
[
{ name : 'Strong Emphasis', element : 'strong' },
{ name : 'Emphasis', element : 'em' },
{ name : 'Computer Code', element : 'code' },
{ name : 'Keyboard Phrase', element : 'kbd' },
{ name : 'Sample Text', element : 'samp' },
{ name : 'Variable', element : 'var' },
{ name : 'Deleted Text', element : 'del' },
{ name : 'Inserted Text', element : 'ins' },
{ name : 'Cited Work', element : 'cite' },
{ name : 'Inline Quotation', element : 'q' }
]
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,120 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Setting Configuration Options &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Setting Configuration Options
</h1>
<p>
This sample shows how to insert a CKEditor instance with custom configuration options.
</p>
<p>
To set configuration options, use the <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html"><code>config</code></a> property. To set the attributes of a <code>&lt;textarea&gt;</code> element (which is displayed instead of CKEditor in unsupported browsers), use the <code>textareaAttributes</code> property.
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Set global configuration (used by every instance of CKEditor).
$CKEditor-><strong>config['width']</strong> = 600;
// Change default textarea attributes.
$CKEditor-><strong>textareaAttributes</strong> = array("cols" => 80, "rows" => 10);
// The initial value to be displayed in the editor.
$initialValue = 'This is some sample text.';
// Create the first instance.
$CKEditor->editor("textarea_id", $initialValue);
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>name</code> attribute of
the <code>&lt;textarea&gt;</code> element to be created.
</p>
<!-- 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">
<label>Editor 1:</label>
<?php
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Do not print the code directly to the browser, return it instead.
$CKEditor->returnOutput = true;
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Set global configuration (will be used by all instances of CKEditor).
$CKEditor->config['width'] = 600;
// Change default textarea attributes.
$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
// Create the first instance.
$code = $CKEditor->editor("editor1", $initialValue);
echo $code;
?>
<br />
<label>Editor 2:</label>
<?php
// Configuration that will only be used by the second editor.
$config['toolbar'] = array(
array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
array( 'Image', 'Link', 'Unlink', 'Anchor' )
);
$config['skin'] = 'v2';
// Create the second instance.
echo $CKEditor->editor("editor2", $initialValue, $config);
?>
<p>
<input type="submit" value="Submit"/>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Event Handlers &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Adding Event Handlers
</h1>
<div class="description">
<p>
This sample shows how to add event handlers to CKEditor with PHP.
</p>
<p>
A snippet of the configuration code can be seen below; check the source code of this page for
the full definition:
</p>
<pre class="samples">&lt;?php
// Include the CKEditor class.
include("ckeditor/ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// The initial value to be displayed in the editor.
$initialValue = 'This is some sample text.';
// Add event handler, <em>instanceReady</em> is fired when editor is loaded.
$CKEditor-><strong>addEventHandler</strong>('instanceReady', 'function (evt) {
alert("Loaded editor: " + evt.editor.name);
}');
// Create an editor instance.
$CKEditor->editor("editor1", $initialValue);
</pre>
</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="../sample_posteddata.php" method="post">
<label>Editor 1:</label>
<?php
/**
* Adds a global event, will hide the "Target" tab in the "Link" dialog window in all instances.
*/
function CKEditorHideLinkTargetTab(&$CKEditor) {
$function = 'function (ev) {
// Take the dialog window name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition comes from the "Link" dialog window.
if ( dialogName == "link" )
dialogDefinition.removeContents("target")
}';
$CKEditor->addGlobalEventHandler('dialogDefinition', $function);
}
/**
* Adds a global event, will notify about an open dialog window.
*/
function CKEditorNotifyAboutOpenedDialog(&$CKEditor) {
$function = 'function (evt) {
alert("Loading a dialog window: " + evt.data.name);
}';
$CKEditor->addGlobalEventHandler('dialogDefinition', $function);
}
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Set a configuration option for all editors.
$CKEditor->config['width'] = 750;
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>';
// Event that will be handled only by the first editor.
$CKEditor->addEventHandler('instanceReady', 'function (evt) {
alert("Loaded editor: " + evt.editor.name);
}');
// Create the first instance.
$CKEditor->editor("editor1", $initialValue);
// Clear event handlers. Instances that will be created later will not have
// the 'instanceReady' listener defined a couple of lines above.
$CKEditor->clearEventHandlers();
?>
<br />
<label>Editor 2:</label>
<?php
// Configuration that will only be used by the second editor.
$config['width'] = '600';
$config['toolbar'] = 'Basic';
// Add some global event handlers (for all editors).
CKEditorHideLinkTargetTab($CKEditor);
CKEditorNotifyAboutOpenedDialog($CKEditor);
// Event that will only be handled by the second editor.
// Instead of calling addEventHandler(), events may be passed as an argument.
$events['instanceReady'] = 'function (evt) {
alert("Loaded second editor: " + evt.editor.name);
}';
// Create the second instance.
$CKEditor->editor("editor2", $initialValue, $config, $events);
?>
<p>
<input type="submit" value="Submit"/>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>CKEditor Samples &mdash; PHP Integration</title>
<link type="text/css" rel="stylesheet" href="../sample.css" />
</head>
<body>
<h1 class="samples">
CKEditor Samples List for PHP
</h1>
<h2 class="samples">
Basic Samples
</h2>
<ul class="samples">
<li><a class="samples" href="replace.php">Replace existing textarea elements by code</a><br />
Replacement of selected textarea elements with CKEditor instances by using a JavaScript call.</li>
<li><a class="samples" href="replaceall.php">Replace all textarea elements by code</a><br />
Replacement of all textarea elements with CKEditor instances by using a JavaScript call.</li>
<li><a class="samples" href="standalone.php">Create CKEditor instances in PHP</a><br />
Creating a CKEditor instance (no initial textarea element is required).</li>
</ul>
<h2 class="samples">
Advanced Samples
</h2>
<ul class="samples">
<li><a class="samples" href="advanced.php">Setting configuration options</a><br />
Creating a CKEditor instance with custom configuration options.</li>
<li><a class="samples" href="events.php">Listening to events</a><br />
Creating event handlers.
</li>
</ul>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Selected Textarea Elements &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Selected Textarea Elements Using PHP Code
</h1>
<div class="description">
<p>
This sample shows how to replace a selected <code>&lt;textarea&gt;</code> element
with a CKEditor instance by using PHP code.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
after the <code>&lt;textarea&gt;</code> element:
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Replace a textarea element with an id (or name) of "textarea_id".
$CKEditor->replace("textarea_id");
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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="../sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<?php
// Include the CKEditor class.
include_once "../../ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Replace a textarea element with an id (or name) of "editor1".
$CKEditor->replace("editor1");
?>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace All Textarea Elements &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace All Textarea Elements Using PHP Code
</h1>
<div class="description">
<p>
This sample shows how to replace all <code>&lt;textarea&gt;</code> elements
with CKEditor by using PHP code.
</p>
<p>
To replace all <code>&lt;textarea&gt;</code> elements, place the following call at any point
after the last <code>&lt;textarea&gt;</code> element:
</p>
<pre class="samples">
&lt;?php
// Include the CKEditor class.
include("ckeditor/ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Replace all textarea elements with CKEditor.
$CKEditor->replaceAll();
?&gt;</pre>
</div>
<!-- This <div> holds alert messages to be displayed 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">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<?php
// Include the CKEditor class.
include("../../ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Replace all textarea elements with CKEditor.
$CKEditor->replaceAll();
?>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creating CKEditor Instances &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link href="../sample.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Creating CKEditor Instances
</h1>
<div class="description">
<p>
This sample shows how to create a CKEditor instance with PHP.
</p>
<pre class="samples">
&lt;?php
include_once "ckeditor/ckeditor.php";
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
// Create a textarea element and attach CKEditor to it.
$CKEditor->editor("textarea_id", "This is some sample text");
?&gt;</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> and <code>name</code> attribute of
the <code>&lt;textarea&gt;</code> element that will be created.
</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>
<!-- This <fieldset> holds the HTML code that you will usually find in your pages. -->
<form action="../sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
</p>
<p>
<?php
// Include the CKEditor class.
include_once "../../ckeditor.php";
// The initial value to be displayed in the editor.
$initialValue = '<p>This is some <strong>sample text</strong>.</p>';
// Create a class instance.
$CKEditor = new CKEditor();
// Path to the CKEditor directory, ideally use an absolute path instead of a relative dir.
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = '../../';
// Create a textarea element and attach CKEditor to it.
$CKEditor->editor("editor1", $initialValue);
?>
<input type="submit" value="Submit"/>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Placeholder Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Placeholder Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Placeholder</strong> plugin that lets you insert read-only elements
into your content. To enter and modify read-only text, use the
<strong>Create Placeholder</strong> button and its matching dialog window.
</p>
<p>
To add a CKEditor instance that uses the <code>placeholder</code> plugin and a related
<strong>Create Placeholder</strong> toolbar button, insert the following JavaScript
call to your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'placeholder',</strong>
toolbar : [ [ 'Source', 'Bold' ], [<strong>'CreatePlaceholder'</strong>] ]
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>placeholder</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1', {
extraPlugins : 'placeholder',
toolbar : [ [ 'Source', 'CreatePlaceholder' ] ]
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,91 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Read-only State &mdash; CKEditor Sample</title>
<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[
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
editor = ev.editor;
// Show this "on" button.
document.getElementById( 'readOnlyOn' ).style.display = '';
// Event fired when the readOnly property changes.
editor.on( 'readOnly', function()
{
document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
});
});
function toggleReadOnly( isReadOnly )
{
// Change the read-only state of the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
editor.setReadOnly( isReadOnly );
}
//]]>
</script>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the CKEditor Read-Only API
</h1>
<div class="description">
<p>
This sample shows how to use the
<code><a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly">setReadOnly</a></code>
API to put editor into the read-only state that makes it impossible for users to change the editor contents.
</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="sample_posteddata.php" method="post">
<p>
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none" />
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Textarea Elements by Class Name
</h1>
<div class="description">
<p>
This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
of a given class with a CKEditor instance.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, simply assign it the <code>ckeditor</code>
class, as in the code below:
</p>
<pre class="samples">&lt;textarea <strong>class="ckeditor</strong>" name="editor1"&gt;&lt;/textarea&gt;</pre>
<p>
Note that other <code>&lt;textarea&gt;</code> attributes (like <code>id</code> or <code>name</code>) need to be adjusted to your document.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textarea by Code &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Replace Textarea Elements Using JavaScript Code
</h1>
<div class="description">
<p>
This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
with a CKEditor instance by using a JavaScript call.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
after the <code>&lt;textarea&gt;</code> element or inside a <code>&lt;script&gt;</code> element located
in the <code>&lt;head&gt;</code> section of the page, in a <code>window.onload</code> event handler:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>' );</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
//]]>
</script>
</p>
<p>
<label for="editor2">
Editor 2:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2' );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,163 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre {
line-height: 1.5em;
}
body {
padding:10px 30px;
}
input, textarea, select, option, optgroup, button, td, th {
font-size: 100%;
}
pre,
code,
kbd,
samp,
tt{
font-family: monospace,monospace;
font-size: 1em;
}
h1.samples {
color:#0782C1;
font-size:200%;
font-weight:normal;
margin: 0;
padding: 0;
}
h2.samples {
color:#000000;
font-size:130%;
margin: 0;
padding: 0;
}
p, blockquote, address, form, pre, dl, h1.samples, h2.samples {
margin-bottom:15px;
}
ul.samples {
margin-bottom:15px;
}
.clear {
clear:both;
}
fieldset
{
margin: 0;
padding: 10px;
}
body, input, textarea {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 75%;
}
a.samples {
color:#189DE1;
text-decoration:none;
}
a.samples:hover {
text-decoration:underline;
}
form
{
margin: 0;
padding: 0;
}
pre.samples
{
background-color: #F7F7F7;
border: 1px solid #D7D7D7;
overflow: auto;
padding: 0.25em;
}
#alerts
{
color: Red;
}
#footer hr
{
margin: 10px 0 15px 0;
height: 1px;
border: solid 1px gray;
border-bottom: none;
}
#footer p
{
margin: 0 10px 10px 10px;
float: left;
}
#footer #copy
{
float: right;
}
#outputSample
{
width: 100%;
table-layout: fixed;
}
#outputSample thead th
{
color: #dddddd;
background-color: #999999;
padding: 4px;
white-space: nowrap;
}
#outputSample tbody th
{
vertical-align: top;
text-align: left;
}
#outputSample pre
{
margin: 0;
padding: 0;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla*/
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
.description {
border: 1px dotted #B7B7B7;
margin-bottom: 10px;
padding: 10px 10px 0;
}
label {
display: block;
margin-bottom:6px;
}
.cke_dialog label
{
display: inline;
margin-bottom: auto;
}

View File

@@ -0,0 +1,65 @@
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
// This file is not required by CKEditor and may be safely ignored.
// It is just a helper file that displays a red message about browser compatibility
// at the top of the samples (if incompatible browser is detected).
if ( window.CKEDITOR )
{
(function()
{
var showCompatibilityMsg = function()
{
var env = CKEDITOR.env;
var html = '<p><strong>Your browser is not compatible with CKEditor.</strong>';
var browsers =
{
gecko : 'Firefox 2.0',
ie : 'Internet Explorer 6.0',
opera : 'Opera 9.5',
webkit : 'Safari 3.0'
};
var alsoBrowsers = '';
for ( var key in env )
{
if ( browsers[ key ] )
{
if ( env[key] )
html += ' CKEditor is compatible with ' + browsers[ key ] + ' or higher.';
else
alsoBrowsers += browsers[ key ] + '+, ';
}
}
alsoBrowsers = alsoBrowsers.replace( /\+,([^,]+), $/, '+ and $1' );
html += ' It is also compatible with ' + alsoBrowsers + '.';
html += '</p><p>With non compatible browsers, you should still be able to see and edit the contents (HTML) in a plain text field.</p>';
var alertsEl = document.getElementById( 'alerts' );
alertsEl && ( alertsEl.innerHTML = html );
};
var onload = function()
{
// Show a friendly compatibility message as soon as the page is loaded,
// for those browsers that are not compatible with CKEditor.
if ( !CKEDITOR.env.isCompatible )
showCompatibilityMsg();
};
// Register the onload listener.
if ( window.addEventListener )
window.addEventListener( 'load', onload, false );
else if ( window.attachEvent )
window.attachEvent( 'onload', onload );
})();
}

View File

@@ -0,0 +1,21 @@
<?php /*
-------------------------------------------------------------------------------------------
CKEditor - Posted Data
We are sorry, but your Web server does not support the PHP language used in this script.
Please note that CKEditor can be used with any other server-side language than just PHP.
To save the content created with CKEditor you need to read the POST data on the server
side and write it to a file or a database.
Copyright 2003-2011, CKSource - Frederico Knabben.
All rights reserved.
-------------------------------------------------------------------------------------------
*/ include "assets/_posteddata.php"; ?>

View File

@@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shared Toolbars &mdash; CKEditor Sample</title>
<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" />
<style id="styles" type="text/css">
#editorsForm
{
height: 400px;
overflow: auto;
border: solid 1px #555;
margin: 10px 0;
padding: 0 10px;
}
</style>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Shared Toolbars
</h1>
<div class="description">
<p>
This sample shows how to configure multiple CKEditor instances to share some parts of the interface.
You can choose to share the toolbar (<code>topSpace</code>), the elements path
(<code>bottomSpace</code>), or both.
</p>
<p>
CKEditor instances with shared spaces can be inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
}</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</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>
<div id="topSpace">
</div>
<form action="sample_posteddata.php" id="editorsForm" method="post">
<p>
<label for="editor1">
Editor 1 (uses the shared toolbar and elements path):</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2 (uses the shared toolbar and elements path):</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor3">
Editor 3 (uses the shared toolbar only):</label>
<textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor4">
Editor 4 (no shared spaces):</label>
<textarea cols="80" id="editor4" name="editor4" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<div id="bottomSpace">
</div>
<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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
<script type="text/javascript">
//<![CDATA[
// Create all editor instances at the end of the page, so we are sure
// that the "bottomSpace" div is available in the DOM (IE issue).
CKEDITOR.replace( 'editor1',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor2',
{
sharedSpaces :
{
top : 'topSpace',
bottom : 'bottomSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
// Removes the resizer as it's not usable in a
// shared elements path.
removePlugins : 'maximize,resize'
} );
CKEDITOR.replace( 'editor3',
{
sharedSpaces :
{
top : 'topSpace'
},
// Removes the maximize plugin as it's not usable
// in a shared toolbar.
removePlugins : 'maximize'
} );
CKEDITOR.replace( 'editor4' );
//]]>
</script>
</body>
</html>

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skins &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Skins
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance using a specific <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.skin">skin</a>.
</p>
<p>
CKEditor with a specified skin (in this case, the "Office 2003" skin) is inserted with a JavaScript call using the following code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'office2003'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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="sample_posteddata.php" method="post">
<h2 class="samples">&quot;Kama&quot; skin</h2>
<p>The default skin used in CKEditor. No additional configuration is required.</p>
<p>
<textarea cols="80" id="editor_kama" name="editor_kama" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_kama',
{
skin : 'kama'
});
//]]>
</script>
</p>
<h2 class="samples">&quot;Office 2003&quot; skin</h2>
<p>Use the following code to configure a CKEditor instance to use the "Office 2003" skin.</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'office2003'</strong>
});</pre>
<p>
<textarea cols="80" id="editor_office2003" name="editor_office2003" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_office2003',
{
skin : 'office2003'
});
//]]>
</script>
</p>
<h2 class="samples">&quot;V2&quot; skin</h2>
<p>Use the following code to configure a CKEditor instance to use the "V2" skin.</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>skin : 'v2'</strong>
});</pre>
<textarea cols="80" id="editor_v2" name="editor_v2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor_v2',
{
skin : 'v2'
});
//]]>
</script>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Stylesheet Parser Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the Stylesheet Parser Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>Stylesheet Parser</strong> (<code>stylesheetparser</code>) plugin that fills
the <strong>Styles</strong> drop-down list based on the CSS rules available in the document stylesheet.
</p>
<p>
To add a CKEditor instance using the <code>stylesheetparser</code> plugin, insert
the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'stylesheetparser'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>stylesheetparser</code> plugin with its default configuration:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' ,
{
extraPlugins : 'stylesheetparser',
/*
* Stylesheet for the contents.
*/
contentsCss : 'assets/parsesample.css',
/*
* Do not load the default Styles configuration.
*/
stylesSet : []
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using TableResize Plugin &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Using the TableResize Plugin
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor instances to use the
<strong>TableResize</strong> (<code>tableresize</code>) plugin that allows
the user to edit table columns by using the mouse.
</p>
<p>
The TableResize plugin makes it possible to modify table column width. Hover
your mouse over the column border to see the cursor change to indicate that
the column can be resized. Click and drag your mouse to set the desired width.
</p>
<p>
By default the plugin is turned off. To add a CKEditor instance using the
TableResize plugin, insert the following JavaScript call into your code:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'tableresize'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</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="sample_posteddata.php" method="post">
<p>
<label for="editor1">
CKEditor using the <code>tableresize</code> plugin:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">
&lt;table style="width: 500px;"&gt;
&lt;caption&gt;
A sample table&lt;/caption&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
Column 1&lt;/td&gt;
&lt;td&gt;
Column 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
You can resize a table column.&lt;/td&gt;
&lt;td&gt;
Hover your mouse over its border.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
Watch the cursor change.&lt;/td&gt;
&lt;td&gt;
Now click and drag to resize.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1', {
extraPlugins : 'tableresize'
});
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,129 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UI Color Picker &mdash; CKEditor Sample</title>
<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" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; UI Color Picker
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance with an option to change the color of its user interface.
</p>
<h2 class="samples">Setting the User Interface Color</h2>
<p>
To specify the color of the user interface, set the <code>uiColor</code> property:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>uiColor: '#EE0000'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
<h2 class="samples">Enabling the Color Picker</h2>
<p>
If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>
toolbar button is added to CKEditor, the user will also be able to pick the color of the
UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.
</p>
<p>
To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,
use the following JavaScript call:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
<strong>extraPlugins : 'uicolor',</strong>
toolbar : [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
});</pre>
</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>
<p>
Click the <strong>UI Color Picker</strong> button to test your color preferences at runtime.
</p>
<p>
The first editor instance includes the <strong>UI Color Picker</strong> toolbar button,
but the default UI color is not defined, so the editor uses the skin color.
</p>
<form action="sample_posteddata.php" method="post">
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'uicolor',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
//]]>
</script>
</p>
<p>
The second editor instance includes the <strong>UI Color Picker</strong> toolbar button. The
default UI color was defined, so the skin color is not used.
</p>
<p>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
} );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,134 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Interface Globalization &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script type="text/javascript" src="../lang/_languages.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; User Interface Languages
</h1>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
with a CKEditor instance with an option to change the language of its user interface.
</p>
<p>
It pulls the language list from CKEditor <code>_languages.js</code> file that contains the list of supported languages and creates
a drop-down list that lets the user change the UI language.
</p>
<p>
By default, CKEditor automatically localizes the editor to the language of the user.
The UI language can be controlled with two configuration options:
<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.language">
<code>language</code></a> and <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.defaultLanguage">
<code>defaultLanguage</code></a>. The <code>defaultLanguage</code> setting specifies the
default CKEditor language to be used when a localization suitable for user's settings is not available.
</p>
<p>
To specify the user interface language that will be used no matter what language is
specified in user's browser or operating system, set the <code>language</code> property:
</p>
<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
{
// Load the German interface.
<strong>language: 'de'</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</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="sample_posteddata.php" method="post">
<p>
Available languages (<span id="count"> </span> languages!):<br />
<script type="text/javascript">
//<![CDATA[
document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
// Get the language list from the _languages.js file.
for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ )
{
document.write(
'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
window.CKEDITOR_LANGS[i].name +
'</option>' );
}
document.write( '</select>' );
//]]>
</script>
<br />
<span style="color: #888888">(You may see strange characters if your system does not
support the selected language)</span>
</p>
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script type="text/javascript">
//<![CDATA[
// Set the number of languages.
document.getElementById( 'count' ).innerHTML = window.CKEDITOR_LANGS.length;
var editor;
function createEditor( languageCode )
{
if ( editor )
editor.destroy();
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
editor = CKEDITOR.replace( 'editor1',
{
language : languageCode,
on :
{
instanceReady : function()
{
// Wait for the editor to be ready to set
// the language combo.
var languages = document.getElementById( 'languages' );
languages.value = this.langCode;
languages.disabled = false;
}
}
} );
}
// At page startup, load the default language:
createEditor( '' );
//]]>
</script>
</p>
</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 &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>