From cfe13666240910235ad20d2e7cfd89b084630117 Mon Sep 17 00:00:00 2001 From: lsces Date: Mon, 4 Aug 2014 23:46:05 +0100 Subject: Upgrade to CKEditor 4.4.3 sample package upgraded --- samples/ajax.html | 164 ++--- samples/api.html | 4 +- samples/appendto.html | 113 ++- samples/assets/outputxhtml/outputxhtml.css | 2 +- samples/assets/posteddata.php | 4 +- samples/assets/uilanguages/languages.js | 6 +- samples/datafiltering.html | 802 ++++++++++----------- samples/divreplace.html | 282 ++++---- samples/index.html | 21 +- samples/inlineall.html | 622 ++++++++-------- samples/inlinebycode.html | 243 ++++--- samples/jquery.html | 100 +++ samples/plugins/devtools/devtools.html | 83 +++ samples/plugins/dialog/assets/my_dialog.js | 48 ++ samples/plugins/dialog/dialog.html | 187 +++++ samples/plugins/enterkey/enterkey.html | 103 +++ .../assets/outputforflash/outputforflash.fla | Bin 0 -> 85504 bytes .../assets/outputforflash/outputforflash.swf | Bin 0 -> 15571 bytes .../htmlwriter/assets/outputforflash/swfobject.js | 18 + samples/plugins/htmlwriter/outputforflash.html | 280 +++++++ samples/plugins/htmlwriter/outputhtml.html | 221 ++++++ samples/plugins/image2/assets/image1.jpg | Bin 0 -> 34316 bytes samples/plugins/image2/assets/image2.jpg | Bin 0 -> 27711 bytes samples/plugins/image2/contents.css | 19 + samples/plugins/image2/image2.html | 70 ++ samples/plugins/magicline/magicline.html | 206 ++++++ samples/plugins/sourcedialog/sourcedialog.html | 118 +++ samples/plugins/stylesheetparser/assets/sample.css | 70 ++ .../plugins/stylesheetparser/stylesheetparser.html | 82 +++ samples/plugins/toolbar/toolbar.html | 232 ++++++ samples/plugins/wysiwygarea/fullpage.html | 77 ++ samples/readonly.html | 146 ++-- samples/replacebyclass.html | 114 +-- samples/replacebycode.html | 112 +-- samples/sample.css | 45 +- samples/sample.js | 6 +- samples/sample_posteddata.php | 2 +- samples/tabindex.html | 150 ++-- samples/uicolor.html | 138 ++-- samples/uilanguages.html | 238 +++--- samples/xhtmlstyle.html | 462 ++++++------ 41 files changed, 3751 insertions(+), 1839 deletions(-) mode change 100644 => 100755 samples/ajax.html mode change 100644 => 100755 samples/appendto.html mode change 100644 => 100755 samples/datafiltering.html mode change 100644 => 100755 samples/divreplace.html mode change 100644 => 100755 samples/inlineall.html mode change 100644 => 100755 samples/inlinebycode.html create mode 100755 samples/jquery.html create mode 100755 samples/plugins/devtools/devtools.html create mode 100755 samples/plugins/dialog/assets/my_dialog.js create mode 100755 samples/plugins/dialog/dialog.html create mode 100755 samples/plugins/enterkey/enterkey.html create mode 100755 samples/plugins/htmlwriter/assets/outputforflash/outputforflash.fla create mode 100755 samples/plugins/htmlwriter/assets/outputforflash/outputforflash.swf create mode 100755 samples/plugins/htmlwriter/assets/outputforflash/swfobject.js create mode 100755 samples/plugins/htmlwriter/outputforflash.html create mode 100755 samples/plugins/htmlwriter/outputhtml.html create mode 100755 samples/plugins/image2/assets/image1.jpg create mode 100755 samples/plugins/image2/assets/image2.jpg create mode 100755 samples/plugins/image2/contents.css create mode 100755 samples/plugins/image2/image2.html create mode 100755 samples/plugins/magicline/magicline.html create mode 100755 samples/plugins/sourcedialog/sourcedialog.html create mode 100755 samples/plugins/stylesheetparser/assets/sample.css create mode 100755 samples/plugins/stylesheetparser/stylesheetparser.html create mode 100755 samples/plugins/toolbar/toolbar.html create mode 100755 samples/plugins/wysiwygarea/fullpage.html mode change 100644 => 100755 samples/readonly.html mode change 100644 => 100755 samples/replacebyclass.html mode change 100644 => 100755 samples/replacebycode.html mode change 100644 => 100755 samples/tabindex.html mode change 100644 => 100755 samples/uicolor.html mode change 100644 => 100755 samples/uilanguages.html mode change 100644 => 100755 samples/xhtmlstyle.html diff --git a/samples/ajax.html b/samples/ajax.html old mode 100644 new mode 100755 index 5c92fa5..59333eb --- a/samples/ajax.html +++ b/samples/ajax.html @@ -1,82 +1,82 @@ - - - - - Ajax — CKEditor Sample - - - - - - -

- CKEditor Samples » Create and Destroy Editor Instances for Ajax Applications -

-
-

- 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 <div> element. -

-

- 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. -

-
-

Click the buttons to create and remove a CKEditor instance.

-

- - -

- -
-
- - - - + + + + + + Ajax — CKEditor Sample + + + + + +

+ CKEditor Samples » Create and Destroy Editor Instances for Ajax Applications +

+
+

+ 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 <div> element. +

+

+ 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. +

+
+

Click the buttons to create and remove a CKEditor instance.

+

+ + +

+ +
+
+ + + + diff --git a/samples/api.html b/samples/api.html index fc14165..a957eed 100755 --- a/samples/api.html +++ b/samples/api.html @@ -1,6 +1,6 @@ @@ -199,7 +199,7 @@ Second line of text preceded by two line breaks. CKEditor - The text editor for the Internet - http://ckeditor.com

- Copyright © 2003-2013, CKSource - Frederico + Copyright © 2003-2014, CKSource - Frederico Knabben. All rights reserved.

diff --git a/samples/appendto.html b/samples/appendto.html old mode 100644 new mode 100755 index 4e97bad..b846770 --- a/samples/appendto.html +++ b/samples/appendto.html @@ -1,57 +1,56 @@ - - - - - CKEDITOR.appendTo — CKEditor Sample - - - - - -

- CKEditor Samples » Append To Page Element Using JavaScript Code -

-
-
-

- CKEDITOR.appendTo is basically to place editors - inside existing DOM elements. Unlike CKEDITOR.replace, - a target container to be replaced is no longer necessary. A new editor - instance is inserted directly wherever it is desired. -

-
CKEDITOR.appendTo( 'container_id',
-	{ /* Configuration options to be used. */ }
-	'Editor content to be used.'
-);
-
- -
-
- - - + + + + + + Append To Page Element Using JavaScript Code — CKEditor Sample + + + + +

+ CKEditor Samples » Append To Page Element Using JavaScript Code +

+
+
+

+ The CKEDITOR.appendTo() method serves to to place editors inside existing DOM elements. Unlike CKEDITOR.replace(), + a target container to be replaced is no longer necessary. A new editor + instance is inserted directly wherever it is desired. +

+
CKEDITOR.appendTo( 'container_id',
+	{ /* Configuration options to be used. */ }
+	'Editor content to be used.'
+);
+
+ +
+
+ + + diff --git a/samples/assets/outputxhtml/outputxhtml.css b/samples/assets/outputxhtml/outputxhtml.css index 9c90a2a..fa0ff37 100755 --- a/samples/assets/outputxhtml/outputxhtml.css +++ b/samples/assets/outputxhtml/outputxhtml.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. + * Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license * * Styles used by the XHTML 1.1 sample page (xhtml.html). diff --git a/samples/assets/posteddata.php b/samples/assets/posteddata.php index 32c3a44..6b26aae 100755 --- a/samples/assets/posteddata.php +++ b/samples/assets/posteddata.php @@ -1,7 +1,7 @@ @@ -52,7 +52,7 @@ if (!empty($_POST)) CKEditor - The text editor for the Internet - http://ckeditor.com

- Copyright © 2003-2013, CKSource - Frederico Knabben. All rights reserved. + Copyright © 2003-2014, CKSource - Frederico Knabben. All rights reserved.

diff --git a/samples/assets/uilanguages/languages.js b/samples/assets/uilanguages/languages.js index 6255d91..3f7ff62 100755 --- a/samples/assets/uilanguages/languages.js +++ b/samples/assets/uilanguages/languages.js @@ -1,7 +1,7 @@ /* - Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. + Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.md or http://ckeditor.com/license */ var CKEDITOR_LANGS=function(){var c={af:"Afrikaans",ar:"Arabic",bg:"Bulgarian",bn:"Bengali/Bangla",bs:"Bosnian",ca:"Catalan",cs:"Czech",cy:"Welsh",da:"Danish",de:"German",el:"Greek",en:"English","en-au":"English (Australia)","en-ca":"English (Canadian)","en-gb":"English (United Kingdom)",eo:"Esperanto",es:"Spanish",et:"Estonian",eu:"Basque",fa:"Persian",fi:"Finnish",fo:"Faroese",fr:"French","fr-ca":"French (Canada)",gl:"Galician",gu:"Gujarati",he:"Hebrew",hi:"Hindi",hr:"Croatian",hu:"Hungarian",id:"Indonesian", -is:"Icelandic",it:"Italian",ja:"Japanese",ka:"Georgian",km:"Khmer",ko:"Korean",ku:"Kurdish",lt:"Lithuanian",lv:"Latvian",mk:"Macedonian",mn:"Mongolian",ms:"Malay",nb:"Norwegian Bokmal",nl:"Dutch",no:"Norwegian",pl:"Polish",pt:"Portuguese (Portugal)","pt-br":"Portuguese (Brazil)",ro:"Romanian",ru:"Russian",si:"Sinhala",sk:"Slovak",sq:"Albanian",sl:"Slovenian",sr:"Serbian (Cyrillic)","sr-latn":"Serbian (Latin)",sv:"Swedish",th:"Thai",tr:"Turkish",ug:"Uighur",uk:"Ukrainian",vi:"Vietnamese",zh:"Chinese Traditional", -"zh-cn":"Chinese Simplified"},b=[],a;for(a in CKEDITOR.lang.languages)b.push({code:a,name:c[a]||a});b.sort(function(a,b){return a.name - - - - Data Filtering — CKEditor Sample - - - - - - -

- CKEditor Samples » Data Filtering and Features Activation -

-
-

- This sample page demonstrates the idea of Advanced Content Filter - (ACF), a sophisticated - tool that takes control over what kind of data is accepted by the editor and what - kind of output is produced. -

-

When and what is being filtered?

-

- ACF controls - every single source of data that comes to the editor. - It process both HTML that is inserted manually (i.e. pasted by the user) - and programmatically like: -

-
-editor.setData( '<p>Hello world!</p>' );
-
-

- ACF discards invalid, - useless HTML tags and attributes so the editor remains "clean" during - runtime. ACF behaviour - can be configured and adjusted for a particular case to prevent the - output HTML (i.e. in CMS systems) from being polluted. - - This kind of filtering is a first, client-side line of defense - against "tag soups", - the tool that precisely restricts which tags, attributes and styles - are allowed (desired). When properly configured, ACF - is an easy and fast way to produce a high-quality, intentionally filtered HTML. -

- -

How to configure or disable ACF?

-

- Advanced Content Filter is enabled by default, working in "automatic mode", yet - it provides a set of easy rules that allow adjusting filtering rules - and disabling the entire feature when necessary. The config property - responsible for this feature is config.allowedContent. -

-

- By "automatic mode" is meant that loaded plugins decide which kind - of content is enabled and which is not. For example, if the link - plugin is loaded it implies that <a> tag is - automatically allowed. Each plugin is given a set - of predefined ACF rules - that control the editor until - config.allowedContent - is defined manually. -

-

- Let's assume our intention is to restrict the editor to accept (produce) paragraphs - only: no attributes, no styles, no other tags. - With ACF - this is very simple. Basically set - config.allowedContent to 'p': -

-
-var editor = CKEDITOR.replace( textarea_id, {
-	allowedContent: 'p'
-} );
-
-

- Now try to play with allowed content: -

-
-// Trying to insert disallowed tag and attribute.
-editor.setData( '<p style="color: red">Hello <em>world</em>!</p>' );
-alert( editor.getData() );
-
-// Filtered data is returned.
-"<p>Hello world!</p>"
-
-

- What happened? Since config.allowedContent: 'p' is set the editor assumes - that only plain <p> are accepted. Nothing more. This is why - style attribute and <em> tag are gone. The same - filtering would happen if we pasted disallowed HTML into this editor. -

-

- This is just a small sample of what ACF - can do. To know more, please refer to the sample section below and - the official Advanced Content Filter guide. -

-

- You may, of course, want CKEditor to avoid filtering of any kind. - To get rid of ACF, - basically set - config.allowedContent to true like this: -

-
-CKEDITOR.replace( textarea_id, {
-	allowedContent: true
-} );
-
- -

Beyond data flow: Features activation

-

- ACF is far more than - I/O control: the entire - UI of the editor is adjusted to what - filters restrict. For example: if <a> tag is - disallowed - by ACF, - then accordingly link command, toolbar button and link dialog - are also disabled. Editor is smart: it knows which features must be - removed from the interface to match filtering rules. -

-

- CKEditor can be far more specific. If <a> tag is - allowed by filtering rules to be used but it is restricted - to have only one attribute (href) - config.allowedContent = 'a[!href]', then - "Target" tab of the link dialog is automatically disabled as target - attribute isn't included in ACF rules - for <a>. This behaviour applies to dialog fields, context - menus and toolbar buttons. -

- -

Sample configurations

-

- There are several editor instances below that present different - ACF setups. All of them, - except the last inline instance, share the same HTML content to visualize - how different filtering rules affect the same input data. -

-
- -
- -
-

- This editor is using default configuration ("automatic mode"). It means that - - config.allowedContent is defined by loaded plugins. - Each plugin extends filtering rules to make it's own associated content - available for the user. -

-
- - - -
- -
- -
- -
-

- This editor is using a custom configuration for - ACF: -

-
-CKEDITOR.replace( 'editor2', {
-	allowedContent:
-		'h1 h2 h3 p blockquote strong em;' +
-		'a[!href];' +
-		'img(left,right)[!src,alt,width,height];' +
-		'table tr th td caption;' +
-		'span{!font-family};' +'
-		'span{!color};' +
-		'span(!marker);' +
-		'del ins'
-} );
-
-

- The following rules may require additional explanation: -

-
    -
  • - h1 h2 h3 p blockquote strong em - These tags - are accepted by the editor. Any tag attributes will be discarded. -
    • -
  • - a[!href] - href attribute is obligatory - for <a> tag. Tags without this attribute - are disarded. No other attribute will be accepted. -
    • -
  • - img(left,right)[!src,alt,width,height] - src - attribute is obligatory for <img> tag. - alt, width, height - and class attributes are accepted but - class must be either class="left" - or class="right" -
    • -
  • - table tr th td caption - These tags - are accepted by the editor. Any tag attributes will be discarded. -
    • -
  • - span{!font-family}, span{!color}, - span(!marker) - <span> tags - will be accepted if either font-family or - color style is set or class="marker" - is present. -
    • -
  • - del ins - These tags - are accepted by the editor. Any tag attributes will be discarded. -
    • -
-

- Please note that UI of the - editor is different. It's a response to what happened to the filters. - Since text-align isn't allowed, the align toolbar is gone. - The same thing happened to subscript/superscript, strike, underline - (<u>, <sub>, <sup> - are disallowed by - config.allowedContent) and many other buttons. -

-
- - -
- -
- -
- -
-

- This editor is using a custom configuration for - ACF. - Note that filters can be configured as an object literal - as an alternative to a string-based definition. -

-
-CKEDITOR.replace( 'editor3', {
-	allowedContent: {
-		'b i ul ol big small': true,
-		'h1 h2 h3 p blockquote li': {
-			styles: 'text-align'
-		},
-		a: { attributes: '!href,target' },
-		img: {
-			attributes: '!src,alt',
-			styles: 'width,height',
-			classes: 'left,right'
-		}
-	}
-} );
-
-
- - -
- -
- -
- -
-

- This editor is using a custom set of plugins and buttons. -

-
-CKEDITOR.replace( 'editor4', {
-	removePlugins: 'bidi,font,forms,flash,horizontalrule,iframe,justify,table,tabletools,smiley',
-	removeButtons: 'Anchor,Underline,Strike,Subscript,Superscript,Image',
-	format_tags: 'p;h1;h2;h3;pre;address'
-} );
-
-

- As you can see, removing plugins and buttons implies filtering. - Several tags are not allowed in the editor because there's no - plugin/button that is responsible for creating and editing this - kind of content (for example: the image is missing because - of removeButtons: 'Image'). The conclusion is that - ACF works "backwards" - as well: modifying UI - elements is changing allowed content rules. -

-
- - -
- -
- -
- -
-

- This editor is built on editable <h1> element. - ACF takes care of - what can be included in <h1>. Note that there - are no block styles in Styles combo. Also why lists, indentation, - blockquote, div, form and other buttons are missing. -

-

- ACF makes sure that - no disallowed tags will come to <h1> so the final - markup is valid. If the user tried to paste some invalid HTML - into this editor (let's say a list), it would be automatically - converted into plain text. -

-
-

- Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. -

-
- - - - + + + + + + Data Filtering — CKEditor Sample + + + + + +

+ CKEditor Samples » Data Filtering and Features Activation +

+
+

+ This sample page demonstrates the idea of Advanced Content Filter + (ACF), a sophisticated + tool that takes control over what kind of data is accepted by the editor and what + kind of output is produced. +

+

When and what is being filtered?

+

+ ACF controls + every single source of data that comes to the editor. + It process both HTML that is inserted manually (i.e. pasted by the user) + and programmatically like: +

+
+editor.setData( '<p>Hello world!</p>' );
+
+

+ ACF discards invalid, + useless HTML tags and attributes so the editor remains "clean" during + runtime. ACF behaviour + can be configured and adjusted for a particular case to prevent the + output HTML (i.e. in CMS systems) from being polluted. + + This kind of filtering is a first, client-side line of defense + against "tag soups", + the tool that precisely restricts which tags, attributes and styles + are allowed (desired). When properly configured, ACF + is an easy and fast way to produce a high-quality, intentionally filtered HTML. +

+ +

How to configure or disable ACF?

+

+ Advanced Content Filter is enabled by default, working in "automatic mode", yet + it provides a set of easy rules that allow adjusting filtering rules + and disabling the entire feature when necessary. The config property + responsible for this feature is config.allowedContent. +

+

+ By "automatic mode" is meant that loaded plugins decide which kind + of content is enabled and which is not. For example, if the link + plugin is loaded it implies that <a> tag is + automatically allowed. Each plugin is given a set + of predefined ACF rules + that control the editor until + config.allowedContent + is defined manually. +

+

+ Let's assume our intention is to restrict the editor to accept (produce) paragraphs + only: no attributes, no styles, no other tags. + With ACF + this is very simple. Basically set + config.allowedContent to 'p': +

+
+var editor = CKEDITOR.replace( textarea_id, {
+	allowedContent: 'p'
+} );
+
+

+ Now try to play with allowed content: +

+
+// Trying to insert disallowed tag and attribute.
+editor.setData( '<p style="color: red">Hello <em>world</em>!</p>' );
+alert( editor.getData() );
+
+// Filtered data is returned.
+"<p>Hello world!</p>"
+
+

+ What happened? Since config.allowedContent: 'p' is set the editor assumes + that only plain <p> are accepted. Nothing more. This is why + style attribute and <em> tag are gone. The same + filtering would happen if we pasted disallowed HTML into this editor. +

+

+ This is just a small sample of what ACF + can do. To know more, please refer to the sample section below and + the official Advanced Content Filter guide. +

+

+ You may, of course, want CKEditor to avoid filtering of any kind. + To get rid of ACF, + basically set + config.allowedContent to true like this: +

+
+CKEDITOR.replace( textarea_id, {
+	allowedContent: true
+} );
+
+ +

Beyond data flow: Features activation

+

+ ACF is far more than + I/O control: the entire + UI of the editor is adjusted to what + filters restrict. For example: if <a> tag is + disallowed + by ACF, + then accordingly link command, toolbar button and link dialog + are also disabled. Editor is smart: it knows which features must be + removed from the interface to match filtering rules. +

+

+ CKEditor can be far more specific. If <a> tag is + allowed by filtering rules to be used but it is restricted + to have only one attribute (href) + config.allowedContent = 'a[!href]', then + "Target" tab of the link dialog is automatically disabled as target + attribute isn't included in ACF rules + for <a>. This behaviour applies to dialog fields, context + menus and toolbar buttons. +

+ +

Sample configurations

+

+ There are several editor instances below that present different + ACF setups. All of them, + except the last inline instance, share the same HTML content to visualize + how different filtering rules affect the same input data. +

+
+ +
+ +
+

+ This editor is using default configuration ("automatic mode"). It means that + + config.allowedContent is defined by loaded plugins. + Each plugin extends filtering rules to make it's own associated content + available for the user. +

+
+ + + +
+ +
+ +
+ +
+

+ This editor is using a custom configuration for + ACF: +

+
+CKEDITOR.replace( 'editor2', {
+	allowedContent:
+		'h1 h2 h3 p blockquote strong em;' +
+		'a[!href];' +
+		'img(left,right)[!src,alt,width,height];' +
+		'table tr th td caption;' +
+		'span{!font-family};' +'
+		'span{!color};' +
+		'span(!marker);' +
+		'del ins'
+} );
+
+

+ The following rules may require additional explanation: +

+
    +
  • + h1 h2 h3 p blockquote strong em - These tags + are accepted by the editor. Any tag attributes will be discarded. +
    • +
  • + a[!href] - href attribute is obligatory + for <a> tag. Tags without this attribute + are disarded. No other attribute will be accepted. +
    • +
  • + img(left,right)[!src,alt,width,height] - src + attribute is obligatory for <img> tag. + alt, width, height + and class attributes are accepted but + class must be either class="left" + or class="right" +
    • +
  • + table tr th td caption - These tags + are accepted by the editor. Any tag attributes will be discarded. +
    • +
  • + span{!font-family}, span{!color}, + span(!marker) - <span> tags + will be accepted if either font-family or + color style is set or class="marker" + is present. +
    • +
  • + del ins - These tags + are accepted by the editor. Any tag attributes will be discarded. +
    • +
+

+ Please note that UI of the + editor is different. It's a response to what happened to the filters. + Since text-align isn't allowed, the align toolbar is gone. + The same thing happened to subscript/superscript, strike, underline + (<u>, <sub>, <sup> + are disallowed by + config.allowedContent) and many other buttons. +

+
+ + +
+ +
+ +
+ +
+

+ This editor is using a custom configuration for + ACF. + Note that filters can be configured as an object literal + as an alternative to a string-based definition. +

+
+CKEDITOR.replace( 'editor3', {
+	allowedContent: {
+		'b i ul ol big small': true,
+		'h1 h2 h3 p blockquote li': {
+			styles: 'text-align'
+		},
+		a: { attributes: '!href,target' },
+		img: {
+			attributes: '!src,alt',
+			styles: 'width,height',
+			classes: 'left,right'
+		}
+	}
+} );
+
+
+ + +
+ +
+ +
+ +
+

+ This editor is using a custom set of plugins and buttons. +

+
+CKEDITOR.replace( 'editor4', {
+	removePlugins: 'bidi,font,forms,flash,horizontalrule,iframe,justify,table,tabletools,smiley',
+	removeButtons: 'Anchor,Underline,Strike,Subscript,Superscript,Image',
+	format_tags: 'p;h1;h2;h3;pre;address'
+} );
+
+

+ As you can see, removing plugins and buttons implies filtering. + Several tags are not allowed in the editor because there's no + plugin/button that is responsible for creating and editing this + kind of content (for example: the image is missing because + of removeButtons: 'Image'). The conclusion is that + ACF works "backwards" + as well: modifying UI + elements is changing allowed content rules. +

+
+ + +
+ +
+ +
+ +
+

+ This editor is built on editable <h1> element. + ACF takes care of + what can be included in <h1>. Note that there + are no block styles in Styles combo. Also why lists, indentation, + blockquote, div, form and other buttons are missing. +

+

+ ACF makes sure that + no disallowed tags will come to <h1> so the final + markup is valid. If the user tried to paste some invalid HTML + into this editor (let's say a list), it would be automatically + converted into plain text. +

+
+

+ Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. +

+
+ + + + diff --git a/samples/divreplace.html b/samples/divreplace.html old mode 100644 new mode 100755 index 067e474..873c8c2 --- a/samples/divreplace.html +++ b/samples/divreplace.html @@ -1,141 +1,141 @@ - - - - - Replace DIV — CKEditor Sample - - - - - - - -

- CKEditor Samples » Replace DIV with CKEditor on the Fly -

-
-

- This sample shows how to automatically replace <div> elements - with a CKEditor instance on the fly, following user's doubleclick. The content - that was previously placed inside the <div> element will now - be moved into CKEditor editing area. -

-

- For details on how to create this setup check the source code of this sample page. -

-
-

- Double-click any of the following <div> elements to transform them into - editor instances. -

-
-

- Part 1 -

-

- 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. -

-
-
-

- Part 2 -

-

- 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. -

-

- 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. -

-
-
-

- Part 3 -

-

- 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. -

-
- - - + + + + + + Replace DIV — CKEditor Sample + + + + + + +

+ CKEditor Samples » Replace DIV with CKEditor on the Fly +

+
+

+ This sample shows how to automatically replace <div> elements + with a CKEditor instance on the fly, following user's doubleclick. The content + that was previously placed inside the <div> element will now + be moved into CKEditor editing area. +

+

+ For details on how to create this setup check the source code of this sample page. +

+
+

+ Double-click any of the following <div> elements to transform them into + editor instances. +

+
+

+ Part 1 +

+

+ 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. +

+
+
+

+ Part 2 +

+

+ 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. +

+

+ 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. +

+
+
+

+ Part 3 +

+

+ 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. +

+
+ + + diff --git a/samples/index.html b/samples/index.html index 73cdc15..c37a11e 100755 --- a/samples/index.html +++ b/samples/index.html @@ -1,12 +1,12 @@ - CKEditor Samples + CKEditor Samples @@ -43,21 +43,12 @@ For licensing, see LICENSE.md or http://ckeditor.com/license

Plugins

-
New Image pluginNew!
-
Using the new Image plugin to insert captioned images and adjust their dimensions.
- -
Editing source code in a dialogNew!
-
Editing HTML content of both inline and framed editor instances.
- -
Developer Tools plugin
-
Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.
- +
Editing source code in a dialogNew!
+
Editing HTML content of both inline and classic editor instances.
+
Magicline plugin
Using the Magicline plugin to access difficult focus spaces.
-
Stylesheet Parser plugin
-
Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.
-
Full page support
CKEditor inserted with a JavaScript call and used to edit the whole page from <html> to </html>.
@@ -133,7 +124,7 @@ For licensing, see LICENSE.md or http://ckeditor.com/license CKEditor - The text editor for the Internet - http://ckeditor.com

- Copyright © 2003-2013, CKSource - Frederico Knabben. All rights reserved. + Copyright © 2003-2014, CKSource - Frederico Knabben. All rights reserved.

diff --git a/samples/inlineall.html b/samples/inlineall.html old mode 100644 new mode 100755 index 013602e..f82af1d --- a/samples/inlineall.html +++ b/samples/inlineall.html @@ -1,311 +1,311 @@ - - - - - Massive inline editing — CKEditor Sample - - - - - - - -
-

CKEditor Samples » Massive inline editing

-
-

This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with contentEditable attribute set to value true:

- 
<div contenteditable="true" > ... </div>
-

Click inside of any element below to start editing.

-
-
-
- -
-
-
-

- Fusce vitae porttitor -

-

- - Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor. - -

-

- Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat. -

-
-

- Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium. - Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum -

-
-
-

- Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu. -

-
-

Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.

-

Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.

-
-
-
-
-

- Integer condimentum sit amet -

-

- Aenean nonummy a, mattis varius. Cras aliquet. - Praesent magna non mattis ac, rhoncus nunc, rhoncus eget, cursus pulvinar mollis.

-

Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.

-

Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.

-
-
-

- Praesent wisi accumsan sit amet nibh -

-

Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.

-

Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce gravida, erat vitae augue. Fusce urna fringilla gravida.

-

In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.

-
-
-
-
-

- CKEditor logo -

-

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.

-

- Nullam laoreet vel consectetuer tellus suscipit -

-
    -
  • Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.
    • -
  • Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.
    • -
  • Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.
    • -
-

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus.

-

Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.

-

Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.

-
-
-
-
- Tags of this article: -

- inline, editing, floating, CKEditor -

-
-
- - - + + + + + + Massive inline editing — CKEditor Sample + + + + + + +
+

CKEditor Samples » Massive inline editing

+
+

This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with contentEditable attribute set to value true:

+ 
<div contenteditable="true" > ... </div>
+

Click inside of any element below to start editing.

+
+
+
+ +
+
+
+

+ Fusce vitae porttitor +

+

+ + Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor. + +

+

+ Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat. +

+
+

+ Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium. + Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum +

+
+
+

+ Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu. +

+
+

Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.

+

Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.

+
+
+
+
+

+ Integer condimentum sit amet +

+

+ Aenean nonummy a, mattis varius. Cras aliquet. + Praesent magna non mattis ac, rhoncus nunc, rhoncus eget, cursus pulvinar mollis.

+

Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.

+

Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.

+
+
+

+ Praesent wisi accumsan sit amet nibh +

+

Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.

+

Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce gravida, erat vitae augue. Fusce urna fringilla gravida.

+

In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.

+
+
+
+
+

+ CKEditor logo +

+

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.

+

+ Nullam laoreet vel consectetuer tellus suscipit +

+
    +
  • Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.
    • +
  • Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.
    • +
  • Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.
    • +
+

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus.

+

Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.

+

Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.

+
+
+
+
+ Tags of this article: +

+ inline, editing, floating, CKEditor +

+
+
+ + + diff --git a/samples/inlinebycode.html b/samples/inlinebycode.html old mode 100644 new mode 100755 index 313972e..4e47536 --- a/samples/inlinebycode.html +++ b/samples/inlinebycode.html @@ -1,122 +1,121 @@ - - - - - Inline Editing by Code — CKEditor Sample - - - - - - -

- CKEditor Samples » Inline Editing by Code -

-
-

- This sample shows how to create an inline editor instance of CKEditor. It is created - with a JavaScript call using the following code: -

-
-// This property tells CKEditor to not activate every element with contenteditable=true element.
-CKEDITOR.disableAutoInline = true;
-
-var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
-
-

- Note that editable in the code above is the id - attribute of the <div> element to be converted into an inline instance. -

-
-
-

Saturn V carrying Apollo 11 Apollo 11

- -

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

- -

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

- -

Broadcasting and quotes

- -

Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:

- -
-

One small step for [a] man, one giant leap for mankind.

-
- -

Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961 by the late U.S. President John F. Kennedy in a speech before the United States Congress:

- -
-

[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.

-
- -

Technical details

- - - - - - - - - - - - - - - - - - - - - - - -
Mission crew
PositionAstronaut
CommanderNeil A. Armstrong
Command Module PilotMichael Collins
Lunar Module PilotEdwin "Buzz" E. Aldrin, Jr.
- -

Launched by a Saturn V rocket from Kennedy Space Center in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of NASA's Apollo program. The Apollo spacecraft had three parts:

- -
    -
  1. Command Module with a cabin for the three astronauts which was the only part which landed back on Earth
    2. -
  2. Service Module which supported the Command Module with propulsion, electrical power, oxygen and water
    3. -
  3. Lunar Module for landing on the Moon.
    4. -
- -

After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the Sea of Tranquility. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the Pacific Ocean on July 24.

- -
-

Source: Wikipedia.org

-
- - - - + + + + + + Inline Editing by Code — CKEditor Sample + + + + + +

+ CKEditor Samples » Inline Editing by Code +

+
+

+ This sample shows how to create an inline editor instance of CKEditor. It is created + with a JavaScript call using the following code: +

+
+// This property tells CKEditor to not activate every element with contenteditable=true element.
+CKEDITOR.disableAutoInline = true;
+
+var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
+
+

+ Note that editable in the code above is the id + attribute of the <div> element to be converted into an inline instance. +

+
+
+

Saturn V carrying Apollo 11 Apollo 11

+ +

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

+ +

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

+ +

Broadcasting and quotes

+ +

Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:

+ +
+

One small step for [a] man, one giant leap for mankind.

+
+ +

Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961 by the late U.S. President John F. Kennedy in a speech before the United States Congress:

+ +
+

[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.

+
+ +

Technical details

+ + + + + + + + + + + + + + + + + + + + + + + +
Mission crew
PositionAstronaut
CommanderNeil A. Armstrong
Command Module PilotMichael Collins
Lunar Module PilotEdwin "Buzz" E. Aldrin, Jr.
+ +

Launched by a Saturn V rocket from Kennedy Space Center in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of NASA's Apollo program. The Apollo spacecraft had three parts:

+ +
    +
  1. Command Module with a cabin for the three astronauts which was the only part which landed back on Earth
    2. +
  2. Service Module which supported the Command Module with propulsion, electrical power, oxygen and water
    3. +
  3. Lunar Module for landing on the Moon.
    4. +
+ +

After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the Sea of Tranquility. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the Pacific Ocean on July 24.

+ +
+

Source: Wikipedia.org

+
+ + + + + diff --git a/samples/jquery.html b/samples/jquery.html new file mode 100755 index 0000000..380b828 --- /dev/null +++ b/samples/jquery.html @@ -0,0 +1,100 @@ + + + + + + jQuery Adapter — CKEditor Sample + + + + + + + + +

+ CKEditor Samples » Create Editors with jQuery +

+
+
+

+ This sample shows how to use the jQuery adapter. + Note that you have to include both CKEditor and jQuery scripts before including the adapter. +

+ +
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="/ckeditor/ckeditor.js"></script>
+<script src="/ckeditor/adapters/jquery.js"></script>
+
+ +

Then you can replace HTML elements with a CKEditor instance using the ckeditor() method.

+ +
+$( document ).ready( function() {
+	$( 'textarea#editor1' ).ckeditor();
+} );
+
+
+ +

Inline Example

+ +
+

Saturn V carrying Apollo 11Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

+

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. +

Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:

+

One small step for [a] man, one giant leap for mankind.

Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961 by the late U.S. President John F. Kennedy in a speech before the United States Congress:

[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.

+
+ +
+ +

Classic (iframe-based) Example

+ + + +

+ + + + + +

+
+ + + diff --git a/samples/plugins/devtools/devtools.html b/samples/plugins/devtools/devtools.html new file mode 100755 index 0000000..ea51be4 --- /dev/null +++ b/samples/plugins/devtools/devtools.html @@ -0,0 +1,83 @@ + + + + + Using DevTools Plugin — CKEditor Sample + + + + + + + + +

+ CKEditor Samples » Using the Developer Tools Plugin +

+
+

+ This sample shows how to configure CKEditor instances to use the + Developer Tools (devtools) 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 + CKEditor JavaScript API + documentation for each of the selected elements. +

+

+ 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. +

+

+ To add a CKEditor instance using the devtools plugin, insert + the following JavaScript call into your code: +

+
+CKEDITOR.replace( 'textarea_id', {
+	extraPlugins: 'devtools'
+});
+

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced with CKEditor. +

+
+
+

+ + + +

+

+ +

+
+ + + diff --git a/samples/plugins/dialog/assets/my_dialog.js b/samples/plugins/dialog/assets/my_dialog.js new file mode 100755 index 0000000..3edd072 --- /dev/null +++ b/samples/plugins/dialog/assets/my_dialog.js @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md 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: 'Text Field' + }, + { + id: 'select1', + type: 'select', + label: 'Select Field', + items: [ + [ 'option1', 'value1' ], + [ 'option2', 'value2' ] + ] + } + ] + }, + { + id: 'tab2', + label: 'Second Tab', + title: 'Second Tab', + elements: [ + { + id: 'button1', + type: 'button', + label: 'Button Field' + } + ] + } + ] + }; +} ); + diff --git a/samples/plugins/dialog/dialog.html b/samples/plugins/dialog/dialog.html new file mode 100755 index 0000000..df09d25 --- /dev/null +++ b/samples/plugins/dialog/dialog.html @@ -0,0 +1,187 @@ + + + + + + Using API to Customize Dialog Windows — CKEditor Sample + + + + + + + + + +

+ CKEditor Samples » Using CKEditor Dialog API +

+
+

+ This sample shows how to use the + CKEditor Dialog API + to customize CKEditor dialog windows without changing the original editor code. + The following customizations are being done in the example below: +

+

+ For details on how to create this setup check the source code of this sample page. +

+
+

A custom dialog is added to the editors using the pluginsLoaded event, from an external dialog definition file:

+
    +
  1. Creating a custom dialog window – "My Dialog" dialog window opened with the "My Dialog" toolbar button.
    2. +
  2. Creating a custom button – Add button to open the dialog with "My Dialog" toolbar button.
    3. +
+ + +

The below editor modify the dialog definition of the above added dialog using the dialogDefinition event:

+
    +
  1. Adding dialog tab – Add new tab "My Tab" to dialog window.
    2. +
  2. Removing a dialog window tab – Remove "Second Tab" page from the dialog window.
    3. +
  3. Adding dialog window fields – Add "My Custom Field" to the dialog window.
    4. +
  4. Removing dialog window field – Remove "Select Field" selection field from the dialog window.
    5. +
  5. Setting default values for dialog window fields – Set default value of "Text Field" text field.
    6. +
  6. Setup initial focus for dialog window – Put initial focus on "My Custom Field" text field.
    7. +
+ + + + + diff --git a/samples/plugins/enterkey/enterkey.html b/samples/plugins/enterkey/enterkey.html new file mode 100755 index 0000000..2d51501 --- /dev/null +++ b/samples/plugins/enterkey/enterkey.html @@ -0,0 +1,103 @@ + + + + + + ENTER Key Configuration — CKEditor Sample + + + + + + + + +

+ CKEditor Samples » ENTER Key Configuration +

+
+

+ This sample shows how to configure the Enter and Shift+Enter keys + to perform actions specified in the + enterMode + and shiftEnterMode + parameters, respectively. + You can choose from the following options: +

+
    +
  • ENTER_P – new <p> paragraphs are created;
    • +
  • ENTER_BR – lines are broken with <br> elements;
    • +
  • ENTER_DIV – new <div> blocks are created.
    • +
+

+ The sample code below shows how to configure CKEditor to create a <div> block when Enter key is pressed. +

+
+CKEDITOR.replace( 'textarea_id', {
+	enterMode: CKEDITOR.ENTER_DIV
+});
+

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced. +

+
+
+ When Enter is pressed:
+ +
+
+ When Shift+Enter is pressed:
+ +
+
+
+

+
+ +

+

+ +

+
+ + + diff --git a/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.fla b/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.fla new file mode 100755 index 0000000..27e68cc Binary files /dev/null and b/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.fla differ diff --git a/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.swf b/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.swf new file mode 100755 index 0000000..dbe17b6 Binary files /dev/null and b/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.swf differ diff --git a/samples/plugins/htmlwriter/assets/outputforflash/swfobject.js b/samples/plugins/htmlwriter/assets/outputforflash/swfobject.js new file mode 100755 index 0000000..95fdf0a --- /dev/null +++ b/samples/plugins/htmlwriter/assets/outputforflash/swfobject.js @@ -0,0 +1,18 @@ +var swfobject=function(){function u(){if(!s){try{var a=d.getElementsByTagName("body")[0].appendChild(d.createElement("span"));a.parentNode.removeChild(a)}catch(b){return}s=!0;for(var a=x.length,c=0;cf){f++;setTimeout(arguments.callee,10);return}a.removeChild(b);c=null;D()})()}else D()}function D(){var a=p.length;if(0e.wk))t(c,!0),f&&(g.success=!0,g.ref=E(c),f(g));else if(p[b].expressInstall&&F()){g={};g.data=p[b].expressInstall;g.width=d.getAttribute("width")||"0";g.height=d.getAttribute("height")||"0";d.getAttribute("class")&&(g.styleclass=d.getAttribute("class"));d.getAttribute("align")&&(g.align=d.getAttribute("align"));for(var h={},d=d.getElementsByTagName("param"),j=d.length,k=0;ke.wk)}function G(a,b,c,f){A=!0;H=f||null;N={success:!1,id:c};var g=n(c);if(g){"OBJECT"==g.nodeName?(w=I(g),B=null):(w=g,B=c);a.id= +O;if(typeof a.width==i||!/%$/.test(a.width)&&310>parseInt(a.width,10))a.width="310";if(typeof a.height==i||!/%$/.test(a.height)&&137>parseInt(a.height,10))a.height="137";d.title=d.title.slice(0,47)+" - Flash Player Installation";f=e.ie&&e.win?"ActiveX":"PlugIn";f="MMredirectURL="+m.location.toString().replace(/&/g,"%26")+"&MMplayerType="+f+"&MMdoctitle="+d.title;b.flashvars=typeof b.flashvars!=i?b.flashvars+("&"+f):f;e.ie&&(e.win&&4!=g.readyState)&&(f=d.createElement("div"),c+="SWFObjectNew",f.setAttribute("id", +c),g.parentNode.insertBefore(f,g),g.style.display="none",function(){g.readyState==4?g.parentNode.removeChild(g):setTimeout(arguments.callee,10)}());J(a,b,c)}}function W(a){if(e.ie&&e.win&&4!=a.readyState){var b=d.createElement("div");a.parentNode.insertBefore(b,a);b.parentNode.replaceChild(I(a),b);a.style.display="none";(function(){4==a.readyState?a.parentNode.removeChild(a):setTimeout(arguments.callee,10)})()}else a.parentNode.replaceChild(I(a),a)}function I(a){var b=d.createElement("div");if(e.win&& +e.ie)b.innerHTML=a.innerHTML;else if(a=a.getElementsByTagName(r)[0])if(a=a.childNodes)for(var c=a.length,f=0;fe.wk)return f;if(g)if(typeof a.id==i&&(a.id=c),e.ie&&e.win){var o="",h;for(h in a)a[h]!=Object.prototype[h]&&("data"==h.toLowerCase()?b.movie=a[h]:"styleclass"==h.toLowerCase()?o+=' class="'+a[h]+'"':"classid"!=h.toLowerCase()&&(o+=" "+ +h+'="'+a[h]+'"'));h="";for(var j in b)b[j]!=Object.prototype[j]&&(h+='');g.outerHTML='"+h+"";C[C.length]=a.id;f=n(a.id)}else{j=d.createElement(r);j.setAttribute("type",y);for(var k in a)a[k]!=Object.prototype[k]&&("styleclass"==k.toLowerCase()?j.setAttribute("class",a[k]):"classid"!=k.toLowerCase()&&j.setAttribute(k,a[k]));for(o in b)b[o]!=Object.prototype[o]&&"movie"!=o.toLowerCase()&& +(a=j,h=o,k=b[o],c=d.createElement("param"),c.setAttribute("name",h),c.setAttribute("value",k),a.appendChild(c));g.parentNode.replaceChild(j,g);f=j}return f}function P(a){var b=n(a);b&&"OBJECT"==b.nodeName&&(e.ie&&e.win?(b.style.display="none",function(){if(4==b.readyState){var c=n(a);if(c){for(var f in c)"function"==typeof c[f]&&(c[f]=null);c.parentNode.removeChild(c)}}else setTimeout(arguments.callee,10)}()):b.parentNode.removeChild(b))}function n(a){var b=null;try{b=d.getElementById(a)}catch(c){}return b} +function U(a,b,c){a.attachEvent(b,c);v[v.length]=[a,b,c]}function z(a){var b=e.pv,a=a.split(".");a[0]=parseInt(a[0],10);a[1]=parseInt(a[1],10)||0;a[2]=parseInt(a[2],10)||0;return b[0]>a[0]||b[0]==a[0]&&b[1]>a[1]||b[0]==a[0]&&b[1]==a[1]&&b[2]>=a[2]?!0:!1}function Q(a,b,c,f){if(!e.ie||!e.mac){var g=d.getElementsByTagName("head")[0];if(g){c=c&&"string"==typeof c?c:"screen";f&&(K=l=null);if(!l||K!=c)f=d.createElement("style"),f.setAttribute("type","text/css"),f.setAttribute("media",c),l=g.appendChild(f), +e.ie&&(e.win&&typeof d.styleSheets!=i&&0\.;]/.exec(a)&&typeof encodeURIComponent!=i?encodeURIComponent(a):a}var i="undefined",r="object",y="application/x-shockwave-flash", +O="SWFObjectExprInst",m=window,d=document,q=navigator,T=!1,x=[function(){T?V():D()}],p=[],C=[],v=[],w,B,H,N,s=!1,A=!1,l,K,R=!0,e=function(){var a=typeof d.getElementById!=i&&typeof d.getElementsByTagName!=i&&typeof d.createElement!=i,b=q.userAgent.toLowerCase(),c=q.platform.toLowerCase(),f=c?/win/.test(c):/win/.test(b),c=c?/mac/.test(c):/mac/.test(b),b=/webkit/.test(b)?parseFloat(b.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):!1,g=!+"\v1",e=[0,0,0],h=null;if(typeof q.plugins!=i&&typeof q.plugins["Shockwave Flash"]== +r){if((h=q.plugins["Shockwave Flash"].description)&&!(typeof q.mimeTypes!=i&&q.mimeTypes[y]&&!q.mimeTypes[y].enabledPlugin))T=!0,g=!1,h=h.replace(/^.*\s+(\S+\s+\S+$)/,"$1"),e[0]=parseInt(h.replace(/^(.*)\..*$/,"$1"),10),e[1]=parseInt(h.replace(/^.*\.(.*)\s.*$/,"$1"),10),e[2]=/[a-zA-Z]/.test(h)?parseInt(h.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}else if(typeof m.ActiveXObject!=i)try{var j=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");if(j&&(h=j.GetVariable("$version")))g=!0,h=h.split(" ")[1].split(","), +e=[parseInt(h[0],10),parseInt(h[1],10),parseInt(h[2],10)]}catch(k){}return{w3:a,pv:e,wk:b,ie:g,win:f,mac:c}}();(function(){e.w3&&((typeof d.readyState!=i&&"complete"==d.readyState||typeof d.readyState==i&&(d.getElementsByTagName("body")[0]||d.body))&&u(),s||(typeof d.addEventListener!=i&&d.addEventListener("DOMContentLoaded",u,!1),e.ie&&e.win&&(d.attachEvent("onreadystatechange",function(){"complete"==d.readyState&&(d.detachEvent("onreadystatechange",arguments.callee),u())}),m==top&&function(){if(!s){try{d.documentElement.doScroll("left")}catch(a){setTimeout(arguments.callee, +0);return}u()}}()),e.wk&&function(){s||(/loaded|complete/.test(d.readyState)?u():setTimeout(arguments.callee,0))}(),M(u)))})();(function(){e.ie&&e.win&&window.attachEvent("onunload",function(){for(var a=v.length,b=0;be.wk)&&a&&b&&c&&d&&g?(t(b,!1),L(function(){c+="";d+="";var e={};if(k&&typeof k===r)for(var l in k)e[l]=k[l];e.data=a;e.width=c;e.height=d;l={};if(j&&typeof j===r)for(var p in j)l[p]=j[p];if(h&&typeof h===r)for(var q in h)l.flashvars=typeof l.flashvars!=i?l.flashvars+("&"+q+"="+h[q]):q+"="+h[q];if(z(g))p=J(e,l,b),e.id== +b&&t(b,!0),n.success=!0,n.ref=p;else{if(o&&F()){e.data=o;G(e,l,b,m);return}t(b,!0)}m&&m(n)})):m&&m(n)},switchOffAutoHideShow:function(){R=!1},ua:e,getFlashPlayerVersion:function(){return{major:e.pv[0],minor:e.pv[1],release:e.pv[2]}},hasFlashPlayerVersion:z,createSWF:function(a,b,c){if(e.w3)return J(a,b,c)},showExpressInstall:function(a,b,c,d){e.w3&&F()&&G(a,b,c,d)},removeSWF:function(a){e.w3&&P(a)},createCSS:function(a,b,c,d){e.w3&&Q(a,b,c,d)},addDomLoadEvent:L,addLoadEvent:M,getQueryParamValue:function(a){var b= +d.location.search||d.location.hash;if(b){/\?/.test(b)&&(b=b.split("?")[1]);if(null==a)return S(b);for(var b=b.split("&"),c=0;c + + + + + Output for Flash — CKEditor Sample + + + + + + + + + + + +

+ CKEditor Samples » Producing Flash Compliant HTML Output +

+
+

+ This sample shows how to configure CKEditor to output + HTML code that can be used with + + Adobe Flash. + The code will contain a subset of standard HTML elements like <b>, + <i>, and <p> as well as HTML attributes. +

+

+ 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. +

+

+ For details on how to create this setup check the source code of this sample page. +

+
+

+ 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 + Send to Flash button. +

+ + + + + +
+ + +

+ +

+ 		+
+
+ + + diff --git a/samples/plugins/htmlwriter/outputhtml.html b/samples/plugins/htmlwriter/outputhtml.html new file mode 100755 index 0000000..f25697d --- /dev/null +++ b/samples/plugins/htmlwriter/outputhtml.html @@ -0,0 +1,221 @@ + + + + + + HTML Compliant Output — CKEditor Sample + + + + + + + + + +

+ CKEditor Samples » Producing HTML Compliant Output +

+
+

+ This sample shows how to configure CKEditor to output valid + HTML 4.01 code. + Traditional HTML elements like <b>, + <i>, and <font> are used in place of + <strong>, <em>, and CSS styles. +

+

+ 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. +

+

+ A snippet of the configuration code can be seen below; check the source of this page for + full definition: +

+
+CKEDITOR.replace( 'textarea_id', {
+	coreStyles_bold: { element: 'b' },
+	coreStyles_italic: { element: 'i' },
+
+	fontSize_style: {
+		element: 'font',
+		attributes: { 'size': '#(size)' }
+	}
+
+	...
+});
+
+
+

+ + + +

+

+ +

+
+ + + diff --git a/samples/plugins/image2/assets/image1.jpg b/samples/plugins/image2/assets/image1.jpg new file mode 100755 index 0000000..2fe79eb Binary files /dev/null and b/samples/plugins/image2/assets/image1.jpg differ diff --git a/samples/plugins/image2/assets/image2.jpg b/samples/plugins/image2/assets/image2.jpg new file mode 100755 index 0000000..453ece5 Binary files /dev/null and b/samples/plugins/image2/assets/image2.jpg differ diff --git a/samples/plugins/image2/contents.css b/samples/plugins/image2/contents.css new file mode 100755 index 0000000..31cd648 --- /dev/null +++ b/samples/plugins/image2/contents.css @@ -0,0 +1,19 @@ +/* +Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.md or http://ckeditor.com/license +*/ + +figure.caption { + text-align: center; + border: solid 1px #ccc; + border-radius: 2px; + background: rgba(0,0,0,0.05); + padding: 10px; + margin: 10px 20px; + display: block; /* For IE8 */ +} + +figure.caption figcaption { + text-align: center; + display: block; /* For IE8 */ +} diff --git a/samples/plugins/image2/image2.html b/samples/plugins/image2/image2.html new file mode 100755 index 0000000..49c39cc --- /dev/null +++ b/samples/plugins/image2/image2.html @@ -0,0 +1,70 @@ + + + + + New Image plugin — CKEditor Sample + + + + + + + + + + +

+ CKEditor Samples » New Image plugin +

+ +
+

+ This editor is using the new Image (image2) plugin, which implements a dynamic click-and-drag resizing + and easy captioning of the images. +

+

+ To use the new plugin, include it in config.extraPlugins + parameter and remove the old one (image) with + config.removePlugins (with dependencies). +

+
+CKEDITOR.replace( 'textarea_id', {
+	extraPlugins: 'image2',
+	removePlugins: 'image'
+} );
+
+
+ + + + + + + + diff --git a/samples/plugins/magicline/magicline.html b/samples/plugins/magicline/magicline.html new file mode 100755 index 0000000..800fbb3 --- /dev/null +++ b/samples/plugins/magicline/magicline.html @@ -0,0 +1,206 @@ + + + + + + Using Magicline plugin — CKEditor Sample + + + + + + + +

+ CKEditor Samples » Using Magicline plugin +

+
+

+ This sample shows the advantages of Magicline plugin + which is to enhance the editing process. Thanks to this plugin, + a number of difficult focus spaces which are inaccessible due to + browser issues can now be focused. +

+

+ Magicline plugin shows a red line with a handler + which, when clicked, inserts a paragraph and allows typing. To see this, + focus an editor and move your mouse above the focus space you want + to access. The plugin is enabled by default so no additional + configuration is necessary. +

+
+
+ +
+

+ This editor uses a default Magicline setup. +

+
+ + +
+
+
+ +
+

+ This editor is using a blue line. +

+
+CKEDITOR.replace( 'editor2', {
+	magicline_color: 'blue'
+});
+
+ + +
+ + + diff --git a/samples/plugins/sourcedialog/sourcedialog.html b/samples/plugins/sourcedialog/sourcedialog.html new file mode 100755 index 0000000..2b920df --- /dev/null +++ b/samples/plugins/sourcedialog/sourcedialog.html @@ -0,0 +1,118 @@ + + + + + + Editing source code in a dialog — CKEditor Sample + + + + + + + + + +

+ CKEditor Samples » Editing source code in a dialog +

+
+

+ Sourcedialog plugin provides an easy way to edit raw HTML content + of an editor, similarly to what is possible with Sourcearea + plugin for classic (iframe-based) instances but using dialogs. Thanks to that, it's also possible + to manipulate raw content of inline editor instances. +

+

+ This plugin extends the toolbar with a button, + which opens a dialog window with a source code editor. It works with both classic + and inline instances. To enable this + plugin, basically add extraPlugins: 'sourcedialog' to editor's + config: +

+
+// Inline editor.
+CKEDITOR.inline( 'editable', {
+	extraPlugins: 'sourcedialog'
+});
+
+// Classic (iframe-based) editor.
+CKEDITOR.replace( 'textarea_id', {
+	extraPlugins: 'sourcedialog',
+	removePlugins: 'sourcearea'
+});
+
+

+ Note that you may want to include removePlugins: 'sourcearea' + in your config when using Sourcedialog in classic editor instances. + This prevents feature redundancy. +

+

+ Note that editable in the code above is the id + attribute of the <div> element to be converted into an inline instance. +

+

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced with CKEditor. +

+
+
+ +
+

This is some sample text. You are using CKEditor.

+
+
+
+
+ + +
+ + + + diff --git a/samples/plugins/stylesheetparser/assets/sample.css b/samples/plugins/stylesheetparser/assets/sample.css new file mode 100755 index 0000000..ce545ee --- /dev/null +++ b/samples/plugins/stylesheetparser/assets/sample.css @@ -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; +} diff --git a/samples/plugins/stylesheetparser/stylesheetparser.html b/samples/plugins/stylesheetparser/stylesheetparser.html new file mode 100755 index 0000000..df1f253 --- /dev/null +++ b/samples/plugins/stylesheetparser/stylesheetparser.html @@ -0,0 +1,82 @@ + + + + + Using Stylesheet Parser Plugin — CKEditor Sample + + + + + + + + + + +

+ CKEditor Samples » Using the Stylesheet Parser Plugin +

+
+

+ This sample shows how to configure CKEditor instances to use the + Stylesheet Parser (stylesheetparser) plugin that fills + the Styles drop-down list based on the CSS rules available in the document stylesheet. +

+

+ To add a CKEditor instance using the stylesheetparser plugin, insert + the following JavaScript call into your code: +

+
+CKEDITOR.replace( 'textarea_id', {
+	extraPlugins: 'stylesheetparser'
+});
+

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced with CKEditor. +

+
+
+

+ + + +

+

+ +

+
+ + + diff --git a/samples/plugins/toolbar/toolbar.html b/samples/plugins/toolbar/toolbar.html new file mode 100755 index 0000000..6cf2ddf --- /dev/null +++ b/samples/plugins/toolbar/toolbar.html @@ -0,0 +1,232 @@ + + + + + + Toolbar Configuration — CKEditor Sample + + + + + + + +

+ CKEditor Samples » Toolbar Configuration +

+
+

+ This sample page demonstrates editor with loaded full toolbar (all registered buttons) and, if + current editor's configuration modifies default settings, also editor with modified toolbar. +

+ +

Since CKEditor 4 there are two ways to configure toolbar buttons.

+ +

By config.toolbar

+ +

+ You can explicitly define which buttons are displayed in which groups and in which order. + This is the more precise setting, but less flexible. If newly added plugin adds its + own button you'll have to add it manually to your config.toolbar setting as well. +

+ +

To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:

+ + 
+CKEDITOR.replace( 'textarea_id', {
+	toolbar: [
+		{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },	// Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
+		[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],			// Defines toolbar group without name.
+		'/',																					// Line break - next group will be placed in new line.
+		{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
+	]
+});
+ +

By config.toolbarGroups

+ +

+ You can define which groups of buttons (like e.g. basicstyles, clipboard + and forms) are displayed and in which order. Registered buttons are associated + with toolbar groups by toolbar property in their definition. + This setting's advantage is that you don't have to modify toolbar configuration + when adding/removing plugins which register their own buttons. +

+ +

To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:

+ + 
+CKEDITOR.replace( 'textarea_id', {
+	toolbarGroups: [
+		{ name: 'document',	   groups: [ 'mode', 'document' ] },			// Displays document group with its two subgroups.
+ 		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },			// Group's name will be used to create voice label.
+ 		'/',																// Line break - next group will be placed in new line.
+ 		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
+ 		{ name: 'links' }
+	]
+
+	// NOTE: Remember to leave 'toolbar' property with the default value (null).
+});
+
+ + + +
+

Full toolbar configuration

+

Below you can see editor with full toolbar, generated automatically by the editor.

+

+ Note: To create editor instance with full toolbar you don't have to set anything. + Just leave toolbar and toolbarGroups with the default, null values. +

+ + 

+	

+
+	
+
+	
+
+
diff --git a/samples/plugins/wysiwygarea/fullpage.html b/samples/plugins/wysiwygarea/fullpage.html
new file mode 100755
index 0000000..174a25f
--- /dev/null
+++ b/samples/plugins/wysiwygarea/fullpage.html
@@ -0,0 +1,77 @@
+
+
+
+
+	
+	Full Page Editing — CKEditor Sample
+	
+	
+	
+	
+	
+	
+	
+
+
+	

+		CKEditor Samples » Full Page Editing
+	

+	

+		

+			This sample shows how to configure CKEditor to edit entire HTML pages, from the
+			<html> tag to the </html> tag.
+		

+		

+			The CKEditor instance below is inserted with a JavaScript call using the following code:
+		

+
+CKEDITOR.replace( 'textarea_id', {
+	fullPage: true,
+	allowedContent: true
+});
+

+		

+			Note that textarea_id in the code above is the id attribute of
+			the <textarea> element to be replaced.
+		

+		

+			The allowedContent in the code above is set to true to disable content filtering.
+			Setting this option is not obligatory, but in full page mode there is a strong chance that one may want be able to freely enter any HTML content in source mode without any limitations.
+		

+	

+	

+		
+		
+		
+		

+			
+		

+	

+	
+
+
diff --git a/samples/readonly.html b/samples/readonly.html
old mode 100644
new mode 100755
index 377bcc7..58f9706
--- a/samples/readonly.html
+++ b/samples/readonly.html
@@ -1,73 +1,73 @@
-
-
-
-
-	Using the CKEditor Read-Only API — CKEditor Sample
-	
-	
-	
-	
-
-
-	

-		CKEditor Samples » Using the CKEditor Read-Only API
-	

-	

-		

-			This sample shows how to use the
-			setReadOnly
-			API to put editor into the read-only state that makes it impossible for users to change the editor contents.
-		

-		

-			For details on how to create this setup check the source code of this sample page.
-		

-	

-	

-		

-			
-		

-		

-			
-			
-		

-	

-	
-
-
+
+
+
+
+	
+	Using the CKEditor Read-Only API — CKEditor Sample
+	
+	
+	
+
+
+	

+		CKEditor Samples » Using the CKEditor Read-Only API
+	

+	

+		

+			This sample shows how to use the
+			setReadOnly
+			API to put editor into the read-only state that makes it impossible for users to change the editor contents.
+		

+		

+			For details on how to create this setup check the source code of this sample page.
+		

+	

+	

+		

+			
+		

+		

+			
+			
+		

+	

+	
+
+
diff --git a/samples/replacebyclass.html b/samples/replacebyclass.html
old mode 100644
new mode 100755
index 6978034..6fc3e6f
--- a/samples/replacebyclass.html
+++ b/samples/replacebyclass.html
@@ -1,57 +1,57 @@
-
-
-
-
-	Replace Textareas by Class Name — CKEditor Sample
-	
-	
-	
-
-
-	

-		CKEditor Samples » Replace Textarea Elements by Class Name
-	

-	

-		

-			This sample shows how to automatically replace all <textarea> elements
-			of a given class with a CKEditor instance.
-		

-		

-			To replace a <textarea> element, simply assign it the ckeditor
-			class, as in the code below:
-		

-
-<textarea class="ckeditor" name="editor1"></textarea>
-

-		

-			Note that other <textarea> attributes (like id or name) need to be adjusted to your document.
-		

-	

-	

-		

-			
-			
-		

-		

-			
-		

-	

-	
-
-
+
+
+
+
+	
+	Replace Textareas by Class Name — CKEditor Sample
+	
+	
+
+
+	

+		CKEditor Samples » Replace Textarea Elements by Class Name
+	

+	

+		

+			This sample shows how to automatically replace all <textarea> elements
+			of a given class with a CKEditor instance.
+		

+		

+			To replace a <textarea> element, simply assign it the ckeditor
+			class, as in the code below:
+		

+
+<textarea class="ckeditor" name="editor1"></textarea>
+

+		

+			Note that other <textarea> attributes (like id or name) need to be adjusted to your document.
+		

+	

+	

+		

+			
+			
+		

+		

+			
+		

+	

+	
+
+
diff --git a/samples/replacebycode.html b/samples/replacebycode.html
old mode 100644
new mode 100755
index a81d788..e5a4c5b
--- a/samples/replacebycode.html
+++ b/samples/replacebycode.html
@@ -1,56 +1,56 @@
-
-
-
-
-	Replace Textarea by Code — CKEditor Sample
-	
-	
-	
-
-
-	

-		CKEditor Samples » Replace Textarea Elements Using JavaScript Code
-	

-	

-		

-			

-				This editor is using an <iframe> element-based editing area, provided by the Wysiwygarea plugin.
-			

-
-CKEDITOR.replace( 'textarea_id' )
-

-		

-		
-		
-		

-			
-		

-	

-	
-
-
+
+
+
+
+	
+	Replace Textarea by Code — CKEditor Sample
+	
+	
+
+
+	

+		CKEditor Samples » Replace Textarea Elements Using JavaScript Code
+	

+	

+		

+			

+				This editor is using an <iframe> element-based editing area, provided by the Wysiwygarea plugin.
+			

+
+CKEDITOR.replace( 'textarea_id' )
+

+		

+		
+		
+		

+			
+		

+	

+	
+
+
diff --git a/samples/sample.css b/samples/sample.css
index fea1aa1..8fd71aa 100755
--- a/samples/sample.css
+++ b/samples/sample.css
@@ -1,11 +1,11 @@
 /*
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md 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;
+	line-height: 1.5;
 }
 
 body
@@ -18,6 +18,14 @@ input, textarea, select, option, optgroup, button, td, th
 	font-size: 100%;
 }
 
+pre
+{
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	-webkit-tab-size: 4;
+	tab-size: 4;
+}
+
 pre, code, kbd, samp, tt
 {
 	font-family: monospace,monospace;
@@ -25,8 +33,8 @@ pre, code, kbd, samp, tt
 }
 
 body {
-    width: 960px;
-    margin: 0 auto;
+	width: 960px;
+	margin: 0 auto;
 }
 
 code
@@ -165,10 +173,6 @@ pre.samples
 	padding: 0.25em;
 	white-space: pre-wrap; /* CSS 2.1 */
 	word-wrap: break-word; /* IE7 */
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	-webkit-tab-size: 4;
-	tab-size: 4;
 }
 
 #footer
@@ -308,9 +312,9 @@ dl.samples > dd
 }
 .warning
 {
-    color: #ff0000;
+	color: #ff0000;
 	background-color: #FFCCBA;
-    border: 2px dotted #ff0000;
+	border: 2px dotted #ff0000;
 	padding: 15px 10px;
 	margin: 10px 0;
 }
@@ -342,15 +346,20 @@ blockquote
 }
 
 img.right {
-    border: 1px solid #ccc;
-    float: right;
-    margin-left: 15px;
-    padding: 5px;
+	border: 1px solid #ccc;
+	float: right;
+	margin-left: 15px;
+	padding: 5px;
 }
 
 img.left {
-    border: 1px solid #ccc;
-    float: left;
-    margin-right: 15px;
-    padding: 5px;
+	border: 1px solid #ccc;
+	float: left;
+	margin-right: 15px;
+	padding: 5px;
+}
+
+.marker
+{
+	background-color: Yellow;
 }
diff --git a/samples/sample.js b/samples/sample.js
index 5a486de..b25482d 100755
--- a/samples/sample.js
+++ b/samples/sample.js
@@ -1,12 +1,12 @@
 /**
- * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */
 
 // Tool scripts for the sample pages.
 // This file can be ignored and is not required to make use of CKEditor.
 
-(function() {
+( function() {
 	CKEDITOR.on( 'instanceReady', function( ev ) {
 		// Check for sample compliance.
 		var editor = ev.editor,
@@ -47,4 +47,4 @@
 
 		}
 	} );
-})();
+} )();
diff --git a/samples/sample_posteddata.php b/samples/sample_posteddata.php
index bf6ac22..e4869b7 100755
--- a/samples/sample_posteddata.php
+++ b/samples/sample_posteddata.php
@@ -9,7 +9,7 @@
   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 the database.
 
-  Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+  Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
   For licensing, see LICENSE.md or http://ckeditor.com/license
 -------------------------------------------------------------------------------------------
 
diff --git a/samples/tabindex.html b/samples/tabindex.html
old mode 100644
new mode 100755
index 7f51881..8952166
--- a/samples/tabindex.html
+++ b/samples/tabindex.html
@@ -1,75 +1,75 @@
-
-
-
-
-	TAB Key-Based Navigation — CKEditor Sample
-	
-	
-	
-	
-	
-
-
-	

-		CKEditor Samples » TAB Key-Based Navigation
-	

-	

-		

-			This sample shows how tab key navigation among editor instances is
-			affected by the tabIndex attribute from
-			the original page element. Use TAB key to move between the editors.
-		

-	

-	

-		
-	

-	

-	

-		
-	

-	

-		
-	

-	
-
-
+
+
+
+
+	
+	TAB Key-Based Navigation — CKEditor Sample
+	
+	
+	
+	
+
+
+	

+		CKEditor Samples » TAB Key-Based Navigation
+	

+	

+		

+			This sample shows how tab key navigation among editor instances is
+			affected by the tabIndex attribute from
+			the original page element. Use TAB key to move between the editors.
+		

+	

+	

+		
+	

+	

+	

+		
+	

+	

+		
+	

+	
+
+
diff --git a/samples/uicolor.html b/samples/uicolor.html
old mode 100644
new mode 100755
index 04e197c..ce4b2a2
--- a/samples/uicolor.html
+++ b/samples/uicolor.html
@@ -1,69 +1,69 @@
-
-
-
-
-	UI Color Picker — CKEditor Sample
-	
-	
-	
-
-
-	

-		CKEditor Samples » UI Color
-	

-	

-		

-			This sample shows how to automatically replace <textarea> elements
-			with a CKEditor instance with an option to change the color of its user interface.

-			Note:The UI skin color feature depends on the CKEditor skin
-			compatibility. The Moono and Kama skins are examples of skins that work with it.
-		

-	

-	

-	

-		This editor instance has a UI color value defined in configuration to change the skin color,
-		To specify the color of the user interface, set the uiColor property:
-	

-	
-CKEDITOR.replace( 'textarea_id', {
-	uiColor: '#14B8C4'
-});

-	

-		Note that textarea_id in the code above is the id attribute of
-		the <textarea> element to be replaced.
-	

-	

-		
-		
-	

-	

-		
-	

-	

-	
-
-
+
+
+
+
+	
+	UI Color Picker — CKEditor Sample
+	
+	
+
+
+	

+		CKEditor Samples » UI Color
+	

+	

+		

+			This sample shows how to automatically replace <textarea> elements
+			with a CKEditor instance with an option to change the color of its user interface.

+			Note:The UI skin color feature depends on the CKEditor skin
+			compatibility. The Moono and Kama skins are examples of skins that work with it.
+		

+	

+	

+	

+		This editor instance has a UI color value defined in configuration to change the skin color,
+		To specify the color of the user interface, set the uiColor property:
+	

+	
+CKEDITOR.replace( 'textarea_id', {
+	uiColor: '#14B8C4'
+});

+	

+		Note that textarea_id in the code above is the id attribute of
+		the <textarea> element to be replaced.
+	

+	

+		
+		
+	

+	

+		
+	

+	

+	
+
+
diff --git a/samples/uilanguages.html b/samples/uilanguages.html
old mode 100644
new mode 100755
index b6ba2a0..66acca4
--- a/samples/uilanguages.html
+++ b/samples/uilanguages.html
@@ -1,119 +1,119 @@
-
-
-
-
-	User Interface Globalization — CKEditor Sample
-	
-	
-	
-	
-
-
-	

-		CKEditor Samples » User Interface Languages
-	

-	

-		

-			This sample shows how to automatically replace <textarea> elements
-			with a CKEditor instance with an option to change the language of its user interface.
-		

-		

-			It pulls the language list from CKEditor _languages.js file that contains the list of supported languages and creates
-			a drop-down list that lets the user change the UI language.
-		

-		

-			By default, CKEditor automatically localizes the editor to the language of the user.
-			The UI language can be controlled with two configuration options:
-			language and
-			
-			defaultLanguage. The defaultLanguage setting specifies the
-			default CKEditor language to be used when a localization suitable for user's settings is not available.
-		

-		

-			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 language property:
-		

-
-CKEDITOR.replace( 'textarea_id', {
-	// Load the German interface.
-	language: 'de'
-});

-		

-			Note that textarea_id in the code above is the id attribute of
-			the <textarea> element to be replaced.
-		

-	

-	

-		

-			Available languages (  languages!):

-			
-			

-			
-				(You may see strange characters if your system does not support the selected language)
-			
-		

-		

-			
-			
-		

-	

-	
-
-
+
+
+
+
+	
+	User Interface Globalization — CKEditor Sample
+	
+	
+	
+
+
+	

+		CKEditor Samples » User Interface Languages
+	

+	

+		

+			This sample shows how to automatically replace <textarea> elements
+			with a CKEditor instance with an option to change the language of its user interface.
+		

+		

+			It pulls the language list from CKEditor _languages.js file that contains the list of supported languages and creates
+			a drop-down list that lets the user change the UI language.
+		

+		

+			By default, CKEditor automatically localizes the editor to the language of the user.
+			The UI language can be controlled with two configuration options:
+			language and
+			
+			defaultLanguage. The defaultLanguage setting specifies the
+			default CKEditor language to be used when a localization suitable for user's settings is not available.
+		

+		

+			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 language property:
+		

+
+CKEDITOR.replace( 'textarea_id', {
+	// Load the German interface.
+	language: 'de'
+});

+		

+			Note that textarea_id in the code above is the id attribute of
+			the <textarea> element to be replaced.
+		

+	

+	

+		

+			Available languages (  languages!):

+			
+			

+			
+				(You may see strange characters if your system does not support the selected language)
+			
+		

+		

+			
+			
+		

+	

+	
+
+
diff --git a/samples/xhtmlstyle.html b/samples/xhtmlstyle.html
old mode 100644
new mode 100755
index 140c5a7..f219d11
--- a/samples/xhtmlstyle.html
+++ b/samples/xhtmlstyle.html
@@ -1,231 +1,231 @@
-
-
-
-
-	XHTML Compliant Output — CKEditor Sample
-	
-	
-	
-	
-	
-
-
-	

-		CKEditor Samples » Producing XHTML Compliant Output
-	

-	

-		

-			This sample shows how to configure CKEditor to output valid
-			XHTML 1.1 code.
-			Deprecated elements (<font>, <u>) or attributes
-			(size, face) will be replaced with XHTML compliant code.
-		

-		

-			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.
-		

-		

-			A snippet of the configuration code can be seen below; check the source of this page for
-			full definition:
-		

-
-CKEDITOR.replace( 'textarea_id', {
-	contentsCss: 'assets/outputxhtml.css',
-
-	coreStyles_bold: {
-		element: 'span',
-		attributes: { 'class': 'Bold' }
-	},
-	coreStyles_italic: {
-		element: 'span',
-		attributes: { 'class': 'Italic' }
-	},
-
-	...
-});

-	

-	

-		

-			
-			
-			
-		

-		

-			
-		

-	

-	
-
-
+
+
+
+
+	
+	XHTML Compliant Output — CKEditor Sample
+	
+	
+	
+	
+
+
+	

+		CKEditor Samples » Producing XHTML Compliant Output
+	

+	

+		

+			This sample shows how to configure CKEditor to output valid
+			XHTML 1.1 code.
+			Deprecated elements (<font>, <u>) or attributes
+			(size, face) will be replaced with XHTML compliant code.
+		

+		

+			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.
+		

+		

+			A snippet of the configuration code can be seen below; check the source of this page for
+			full definition:
+		

+
+CKEDITOR.replace( 'textarea_id', {
+	contentsCss: 'assets/outputxhtml.css',
+
+	coreStyles_bold: {
+		element: 'span',
+		attributes: { 'class': 'Bold' }
+	},
+	coreStyles_italic: {
+		element: 'span',
+		attributes: { 'class': 'Italic' }
+	},
+
+	...
+});

+	

+	

+		

+			
+			
+			
+		

+		

+			
+		

+	

+	
+
+
-- 
cgit v1.3