CRLF to LF

This commit is contained in:
djmaze 2020-03-11 14:17:52 +01:00
parent 4468d5bd22
commit 6e0d0b3b6e
209 changed files with 23729 additions and 22109 deletions

View file

@ -1,12 +1,12 @@
:(t=!!k[n],"br"!=n||!e.data("cke-eol")
:(t=!k||!!k[n],"br"!=n||!e.data("cke-eol")
---
for(F=null;y&&!p[y.getName()][L.name];){
for(F=null;y&&(!p||!p[y.getName()]||!p[y.getName()][L.name]);){
---
a.window.$.getSelection().removeAllRanges()
a.window&&a.window.$&&a.window.$.getSelection().removeAllRanges()
:(t=!!k[n],"br"!=n||!e.data("cke-eol")
:(t=!k||!!k[n],"br"!=n||!e.data("cke-eol")
---
for(F=null;y&&!p[y.getName()][L.name];){
for(F=null;y&&(!p||!p[y.getName()]||!p[y.getName()][L.name]);){
---
a.window.$.getSelection().removeAllRanges()
a.window&&a.window.$&&a.window.$.getSelection().removeAllRanges()

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,54 +1,54 @@
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/**
* This file was added automatically by CKEditor builder.
* You may re-use it at any time to build CKEditor again.
*
* If you would like to build CKEditor online again
* (for example to upgrade), visit one the following links:
*
* (1) http://ckeditor.com/builder
* Visit online builder to build CKEditor from scratch.
*
* (2) http://ckeditor.com/builder/9b9471acfb896c4f73b825ccf971b5bc
* Visit online builder to build CKEditor, starting with the same setup as before.
*
* (3) http://ckeditor.com/builder/download/9b9471acfb896c4f73b825ccf971b5bc
* Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
*
* NOTE:
* This file is not used by CKEditor, you may remove it.
* Changing this file will not change your CKEditor configuration.
*/
var CKBUILDER_CONFIG = {
skin: 'moono-lisa',
preset: 'basic',
ignore: [
'.bender',
'bender.js',
'bender-err.log',
'bender-out.log',
'dev',
'.DS_Store',
'.editorconfig',
'.gitattributes',
'.gitignore',
'gruntfile.js',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'less',
'.mailmap',
'node_modules',
'package.json',
'README.md',
'tests'
],
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/**
* This file was added automatically by CKEditor builder.
* You may re-use it at any time to build CKEditor again.
*
* If you would like to build CKEditor online again
* (for example to upgrade), visit one the following links:
*
* (1) http://ckeditor.com/builder
* Visit online builder to build CKEditor from scratch.
*
* (2) http://ckeditor.com/builder/9b9471acfb896c4f73b825ccf971b5bc
* Visit online builder to build CKEditor, starting with the same setup as before.
*
* (3) http://ckeditor.com/builder/download/9b9471acfb896c4f73b825ccf971b5bc
* Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
*
* NOTE:
* This file is not used by CKEditor, you may remove it.
* Changing this file will not change your CKEditor configuration.
*/
var CKBUILDER_CONFIG = {
skin: 'moono-lisa',
preset: 'basic',
ignore: [
'.bender',
'bender.js',
'bender-err.log',
'bender-out.log',
'dev',
'.DS_Store',
'.editorconfig',
'.gitattributes',
'.gitignore',
'gruntfile.js',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'less',
'.mailmap',
'node_modules',
'package.json',
'README.md',
'tests'
],
plugins : {
'about' : 1,
'autolink' : 1,

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,208 +1,208 @@
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
body
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.cke_editable
{
font-size: 13px;
line-height: 1.6;
/* Fix for missing scrollbars with RTL texts. (#10488) */
word-wrap: break-word;
}
blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
a
{
color: #0782C1;
}
ol,ul,dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
line-height: 1.2;
}
hr
{
border: 0px;
border-top: 1px solid #ccc;
}
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
-moz-tab-size: 4;
tab-size: 4;
}
.marker
{
background-color: Yellow;
}
span[lang]
{
font-style: italic;
}
figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: inline-block;
}
figure > figcaption
{
text-align: center;
display: block; /* For IE8 */
}
a > img {
padding: 1px;
margin: 1px;
border: none;
outline: 1px solid #0782C1;
}
/* Widget Styles */
.code-featured
{
border: 5px solid red;
}
.math-featured
{
padding: 20px;
box-shadow: 0 0 2px rgba(200, 0, 0, 1);
background-color: rgba(255, 0, 0, 0.05);
margin: 10px;
}
.image-clean
{
border: 0;
background: none;
padding: 0;
}
.image-clean > figcaption
{
font-size: .9em;
text-align: right;
}
.image-grayscale
{
background-color: white;
color: #666;
}
.image-grayscale img, img.image-grayscale
{
filter: grayscale(100%);
}
.embed-240p
{
max-width: 426px;
max-height: 240px;
margin:0 auto;
}
.embed-360p
{
max-width: 640px;
max-height: 360px;
margin:0 auto;
}
.embed-480p
{
max-width: 854px;
max-height: 480px;
margin:0 auto;
}
.embed-720p
{
max-width: 1280px;
max-height: 720px;
margin:0 auto;
}
.embed-1080p
{
max-width: 1920px;
max-height: 1080px;
margin:0 auto;
}
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
body
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.cke_editable
{
font-size: 13px;
line-height: 1.6;
/* Fix for missing scrollbars with RTL texts. (#10488) */
word-wrap: break-word;
}
blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
a
{
color: #0782C1;
}
ol,ul,dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
line-height: 1.2;
}
hr
{
border: 0px;
border-top: 1px solid #ccc;
}
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
-moz-tab-size: 4;
tab-size: 4;
}
.marker
{
background-color: Yellow;
}
span[lang]
{
font-style: italic;
}
figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: inline-block;
}
figure > figcaption
{
text-align: center;
display: block; /* For IE8 */
}
a > img {
padding: 1px;
margin: 1px;
border: none;
outline: 1px solid #0782C1;
}
/* Widget Styles */
.code-featured
{
border: 5px solid red;
}
.math-featured
{
padding: 20px;
box-shadow: 0 0 2px rgba(200, 0, 0, 1);
background-color: rgba(255, 0, 0, 0.05);
margin: 10px;
}
.image-clean
{
border: 0;
background: none;
padding: 0;
}
.image-clean > figcaption
{
font-size: .9em;
text-align: right;
}
.image-grayscale
{
background-color: white;
color: #666;
}
.image-grayscale img, img.image-grayscale
{
filter: grayscale(100%);
}
.embed-240p
{
max-width: 426px;
max-height: 240px;
margin:0 auto;
}
.embed-360p
{
max-width: 640px;
max-height: 360px;
margin:0 auto;
}
.embed-480p
{
max-width: 854px;
max-height: 480px;
margin:0 auto;
}
.embed-720p
{
max-width: 1280px;
max-height: 720px;
margin:0 auto;
}
.embed-1080p
{
max-width: 1920px;
max-height: 1080px;
margin:0 auto;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
CKEDITOR.dialog.add("base64imageDialog",function(c){function p(b){if("string"!=typeof b||!b)e.getElement().setHtml("");else{var f=new Image;e.getElement().setHtml("Loading...");f.onload=function(){e.getElement().setHtml("");null==i||null==h?(d.setValueOf("tab-properties","width",this.width),d.setValueOf("tab-properties","height",this.height),j=1,0<this.height&&0<this.width&&(j=this.width/this.height),0>=j&&(j=1)):h=i=null;this.id=c.id+"previewimage";this.setAttribute("style","max-width:400px;max-height:100px;");
CKEDITOR.dialog.add("base64imageDialog",function(c){function p(b){if("string"!=typeof b||!b)e.getElement().setHtml("");else{var f=new Image;e.getElement().setHtml("Loading...");f.onload=function(){e.getElement().setHtml("");null==i||null==h?(d.setValueOf("tab-properties","width",this.width),d.setValueOf("tab-properties","height",this.height),j=1,0<this.height&&0<this.width&&(j=this.width/this.height),0>=j&&(j=1)):h=i=null;this.id=c.id+"previewimage";this.setAttribute("style","max-width:400px;max-height:100px;");
this.setAttribute("alt","");try{var b=e.getElement().$;b&&b.appendChild(this)}catch(f){}};f.onerror=function(){e.getElement().setHtml("")};f.onabort=function(){e.getElement().setHtml("")};f.src=b}}function n(b){e.getElement().setHtml("");if("base64"==b)l&&l.setValue(!1,!0),m&&m.setValue(!1,!0);else if("url"==b)l&&l.setValue(!0,!0),m&&m.setValue(!1,!0),q&&p(q.getValue());else if(r){l&&l.setValue(!1,!0);m&&m.setValue(!0,!0);var f=d.getContentElement("tab-source","file"),b=null;try{b=f.getInputElement().$}catch(a){b=
null}if(b&&("files"in b&&b.files&&0<b.files.length&&b.files[0])&&(!("type"in b.files[0])||b.files[0].type.match("image.*"))&&FileReader)e.getElement().setHtml("Loading..."),f=new FileReader,f.onload=function(){return function(b){e.getElement().setHtml("");p(b.target.result)}}(b.files[0]),f.onerror=function(){e.getElement().setHtml("")},f.onabort=function(){e.getElement().setHtml("")},f.readAsDataURL(b.files[0])}}function s(b){var f=d.getContentElement("tab-properties","width").getValue(),a=d.getContentElement("tab-properties",
"height").getValue(),c="px",g="px";0<=f.indexOf("%")&&(c="%");0<=a.indexOf("%")&&(g="%");f=parseInt(f,10);a=parseInt(a,10);isNaN(f)&&(f=0);isNaN(a)&&(a=0);var e="px";"width"==b?("%"==c&&(e="%"),a=Math.round(f/j)):("%"==g&&(e="%"),f=Math.round(a*j));"%"==e&&(f+="%",a+="%");d.getContentElement("tab-properties","width").setValue(f);d.getContentElement("tab-properties","height").setValue(a)}function t(b){var a=b.getValue(),c="";0<=a.indexOf("%")&&(c="%");a=parseInt(a,10);isNaN(a)&&(a=0);b.setValue(a+

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,20 +1,20 @@
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
.cke_colordialog_colorcell {
width: 12px; /* All cells have equal width which depends on parent width (in this case table parent). Width works more like max-width. */
height: 14px;
padding: 1px; /* Padding is replaced by border for focused cells. Prevents 'jumping' when adding borders. */
}
.cke_colordialog_colorcell.cke_colordialog_focused_light,
.cke_colordialog_colorcell.cke_colordialog_focused_dark {
padding: 0; /* Shrink cell to allow 1px border indicating focus. */
border: 1px dotted #000;
}
.cke_colordialog_colorcell.cke_colordialog_focused_dark {
border-color: #FFF;
}
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
.cke_colordialog_colorcell {
width: 12px; /* All cells have equal width which depends on parent width (in this case table parent). Width works more like max-width. */
height: 14px;
padding: 1px; /* Padding is replaced by border for focused cells. Prevents 'jumping' when adding borders. */
}
.cke_colordialog_colorcell.cke_colordialog_focused_light,
.cke_colordialog_colorcell.cke_colordialog_focused_dark {
padding: 0; /* Shrink cell to allow 1px border indicating focus. */
border: 1px dotted #000;
}
.cke_colordialog_colorcell.cke_colordialog_focused_dark {
border-color: #FFF;
}

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,4 +1,4 @@
var fs=require("fs");
var fs=require("fs");
module.exports=function(a){function b(b,d){fs.readFile(b,"utf8",function(f,g){if(f)return a.log.writeln(f);for(var e=g,c=0;c<d.length;c++)e=e.replace(d[c][0],d[c][1]);fs.writeFile(b,e,"utf8",function(b){if(b)return a.log.writeln(b)})})}a.initConfig({pkg:a.file.readJSON("package.json"),jshint:{all:["lang/*.js","*.js","*.json"],options:{jshintrc:".jshintrc"}},lint5:{dirPath:"samples",templates:["quicktable.html"]},compress:{main:{options:{archive:"release/<%= pkg.name %>-<%= pkg.version %>.zip",level:9,
pretty:!0},files:[{src:"** !node_modules/** !release/** !.* !*.log !Gruntfile.js !package.json !LICENSE !*.md !template.jst !*.zip".split(" "),dest:"<%= pkg.name %>/"}]}},markdown:{all:{files:[{expand:!0,src:"*.md",dest:"release/docs/",ext:".html"}],options:{template:"template.jst",markdownOptions:{gfm:!0,highlight:"manual"}}}}});a.loadNpmTasks("grunt-markdown");a.loadNpmTasks("grunt-contrib-compress");a.loadNpmTasks("grunt-lint5");a.loadNpmTasks("grunt-contrib-jshint");a.registerTask("test",["jshint",
"lint5"]);a.registerTask("build-only",["beforeCompress","compress","afterCompress"]);a.registerTask("build",["test","beforeCompress","compress","afterCompress","markdown"]);a.registerTask("default",["test"]);a.registerTask("beforeCompress","Running before Compression",function(){b("samples/quicktable.html",[[/http\:\/\/cdn.ckeditor.com\/4.4.3\/full-all\//g,"../../../"],[/language: 'en'/g,"// language: 'en'"],[/<\!-- REMOVE BEGIN --\>/g,"<\!-- REMOVE BEGIN --\><\!--"]])});a.registerTask("afterCompress",

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

File diff suppressed because one or more lines are too long

View file

@ -1,128 +1,128 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/samples.css">
<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
</head>
<body id="main">
<nav class="navigation-a">
<div class="grid-container">
<ul class="navigation-a-left grid-width-70">
<li><a href="http://ckeditor.com">Project Homepage</a></li>
<li><a href="http://dev.ckeditor.com/">I found a bug</a></li>
<li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
</ul>
<ul class="navigation-a-right grid-width-30">
<li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li>
</ul>
</div>
</nav>
<header class="header-a">
<div class="grid-container">
<h1 class="header-a-logo grid-width-30">
<a href="index.html"><img src="img/logo.png" alt="CKEditor Sample"></a>
</h1>
<nav class="navigation-b grid-width-70">
<ul>
<li><a href="index.html" class="button-a button-a-background">Start</a></li>
<li><a href="toolbarconfigurator/index.html" class="button-a">Toolbar configurator <span class="balloon-a balloon-a-nw">Edit your toolbar now!</span></a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="adjoined-top">
<div class="grid-container">
<div class="content grid-width-100">
<h1>Congratulations!</h1>
<p>
If you can see CKEditor below, it means that the installation succeeded.
You can now try out your new editor version, see its features, and when you are ready to move on, check some of the <a href="#sample-customize">most useful resources</a> recommended below.
</p>
</div>
</div>
</div>
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<div class="content grid-width-100">
<section id="sample-customize">
<h2>Customize Your Editor</h2>
<p>Modular build and <a href="http://docs.ckeditor.com/#!/guide/dev_configuration">numerous configuration options</a> give you nearly endless possibilities to customize CKEditor. Replace the content of your <code><a href="../config.js">config.js</a></code> file with the following code and refresh this page (<strong>remember to clear the browser cache</strong>)!</p>
<pre class="cm-s-neo CodeMirror"><code><span style="padding-right: 0.1px;"><span class="cm-variable">CKEDITOR</span>.<span class="cm-property">editorConfig</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">config</span> ) {</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">language</span> <span class="cm-operator">=</span> <span class="cm-string">'es'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">uiColor</span> <span class="cm-operator">=</span> <span class="cm-string">'#F7B42C'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-number">300</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">toolbarCanCollapse</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span>
<span style="padding-right: 0.1px;">};</span></code></pre>
</section>
<section>
<h2>Toolbar Configuration</h2>
<p>If you want to reorder toolbar buttons or remove some of them, check <a href="toolbarconfigurator/index.html">this handy tool</a>!</p>
</section>
<section>
<h2>More Samples!</h2>
<p>Visit the <a href="http://sdk.ckeditor.com">CKEditor SDK</a> for a huge collection of samples showcasing editor features, with source code readily available to copy and use in your own implementation.</p>
</section>
<section>
<h2>Developer's Guide</h2>
<p>The most important resource for all developers working with CKEditor, integrating it with their websites and applications, and customizing to their needs. You can start from here:</p>
<ul>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_installation">Getting Started</a> &ndash; Explains most crucial editor concepts and practices as well as the installation process and integration with your website.</li>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_advanced_installation">Advanced Installation Concepts</a> &ndash; Describes how to upgrade, install additional components (plugins, skins), or create a custom build.</li>
</ul>
<p>When you have the basics sorted out, feel free to browse some more advanced sections like:</p>
<ul>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_features">Functionality Overview</a> &ndash; Descriptions and samples of various editor features.</li>
<li><a href="http://docs.ckeditor.com/#!/guide/plugin_sdk_intro">Plugin SDK</a>, <a href="http://docs.ckeditor.com/#!/guide/widget_sdk_intro">Widget SDK</a>, and <a href="http://docs.ckeditor.com/#!/guide/skin_sdk_intro">Skin SDK</a> &ndash; Useful when you want to create your own editor components.</li>
</ul>
</section>
<section>
<h2>CKEditor JavaScript API</h2>
<p>CKEditor boasts a rich <a href="http://docs.ckeditor.com/#!/api">JavaScript API</a> that you can use to adjust the editor to your needs and integrate it with your website or application.</p>
</section>
</div>
</div>
</main>
<footer class="footer-a grid-container">
<div class="grid-container">
<p class="grid-width-100">
CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p class="grid-width-100" id="copy">
Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.
</p>
</div>
</footer>
<script>
initSample();
</script>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/samples.css">
<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
</head>
<body id="main">
<nav class="navigation-a">
<div class="grid-container">
<ul class="navigation-a-left grid-width-70">
<li><a href="http://ckeditor.com">Project Homepage</a></li>
<li><a href="http://dev.ckeditor.com/">I found a bug</a></li>
<li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
</ul>
<ul class="navigation-a-right grid-width-30">
<li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li>
</ul>
</div>
</nav>
<header class="header-a">
<div class="grid-container">
<h1 class="header-a-logo grid-width-30">
<a href="index.html"><img src="img/logo.png" alt="CKEditor Sample"></a>
</h1>
<nav class="navigation-b grid-width-70">
<ul>
<li><a href="index.html" class="button-a button-a-background">Start</a></li>
<li><a href="toolbarconfigurator/index.html" class="button-a">Toolbar configurator <span class="balloon-a balloon-a-nw">Edit your toolbar now!</span></a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="adjoined-top">
<div class="grid-container">
<div class="content grid-width-100">
<h1>Congratulations!</h1>
<p>
If you can see CKEditor below, it means that the installation succeeded.
You can now try out your new editor version, see its features, and when you are ready to move on, check some of the <a href="#sample-customize">most useful resources</a> recommended below.
</p>
</div>
</div>
</div>
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<div class="content grid-width-100">
<section id="sample-customize">
<h2>Customize Your Editor</h2>
<p>Modular build and <a href="http://docs.ckeditor.com/#!/guide/dev_configuration">numerous configuration options</a> give you nearly endless possibilities to customize CKEditor. Replace the content of your <code><a href="../config.js">config.js</a></code> file with the following code and refresh this page (<strong>remember to clear the browser cache</strong>)!</p>
<pre class="cm-s-neo CodeMirror"><code><span style="padding-right: 0.1px;"><span class="cm-variable">CKEDITOR</span>.<span class="cm-property">editorConfig</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">config</span> ) {</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">language</span> <span class="cm-operator">=</span> <span class="cm-string">'es'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">uiColor</span> <span class="cm-operator">=</span> <span class="cm-string">'#F7B42C'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-number">300</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">toolbarCanCollapse</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span>
<span style="padding-right: 0.1px;">};</span></code></pre>
</section>
<section>
<h2>Toolbar Configuration</h2>
<p>If you want to reorder toolbar buttons or remove some of them, check <a href="toolbarconfigurator/index.html">this handy tool</a>!</p>
</section>
<section>
<h2>More Samples!</h2>
<p>Visit the <a href="http://sdk.ckeditor.com">CKEditor SDK</a> for a huge collection of samples showcasing editor features, with source code readily available to copy and use in your own implementation.</p>
</section>
<section>
<h2>Developer's Guide</h2>
<p>The most important resource for all developers working with CKEditor, integrating it with their websites and applications, and customizing to their needs. You can start from here:</p>
<ul>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_installation">Getting Started</a> &ndash; Explains most crucial editor concepts and practices as well as the installation process and integration with your website.</li>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_advanced_installation">Advanced Installation Concepts</a> &ndash; Describes how to upgrade, install additional components (plugins, skins), or create a custom build.</li>
</ul>
<p>When you have the basics sorted out, feel free to browse some more advanced sections like:</p>
<ul>
<li><a href="http://docs.ckeditor.com/#!/guide/dev_features">Functionality Overview</a> &ndash; Descriptions and samples of various editor features.</li>
<li><a href="http://docs.ckeditor.com/#!/guide/plugin_sdk_intro">Plugin SDK</a>, <a href="http://docs.ckeditor.com/#!/guide/widget_sdk_intro">Widget SDK</a>, and <a href="http://docs.ckeditor.com/#!/guide/skin_sdk_intro">Skin SDK</a> &ndash; Useful when you want to create your own editor components.</li>
</ul>
</section>
<section>
<h2>CKEditor JavaScript API</h2>
<p>CKEditor boasts a rich <a href="http://docs.ckeditor.com/#!/api">JavaScript API</a> that you can use to adjust the editor to your needs and integrate it with your website or application.</p>
</section>
</div>
</div>
</main>
<footer class="footer-a grid-container">
<div class="grid-container">
<p class="grid-width-100">
CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p class="grid-width-100" id="copy">
Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.
</p>
</div>
</footer>
<script>
initSample();
</script>
</body>
</html>

View file

@ -1,53 +1,53 @@
/**
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/* exported initSample */
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
CKEDITOR.tools.enableHtml5Elements( document );
// The trick to keep the editor in the sample quite small
// unless user specified own height.
CKEDITOR.config.height = 150;
CKEDITOR.config.width = 'auto';
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=http://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygare plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
} )();
/**
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/* exported initSample */
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
CKEDITOR.tools.enableHtml5Elements( document );
// The trick to keep the editor in the sample quite small
// unless user specified own height.
CKEDITOR.config.height = 150;
CKEDITOR.config.width = 'auto';
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=http://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygare plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
} )();

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

View file

@ -1,85 +1,85 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Ajax &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
<script>
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">
<a href="index.html">CKEditor Samples</a> &raquo; Create and Destroy Editor Instances for Ajax Applications
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/saveajax.html">brand new version in CKEditor SDK</a>.
</div>
<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>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Ajax &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
<script>
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">
<a href="index.html">CKEditor Samples</a> &raquo; Create and Destroy Editor Instances for Ajax Applications
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/saveajax.html">brand new version in CKEditor SDK</a>.
</div>
<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>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View file

@ -1,210 +1,210 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>API Usage &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<script>
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
// Show the editor name and description in the browser status bar.
document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function InsertText() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'txtArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert as plain text.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
editor.insertText( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function SetContents() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Set editor contents (replace current contents).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
function GetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor1;
// Get editor contents
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
alert( editor.getData() );
}
function ExecuteCommand( commandName ) {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Execute the command.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
editor.execCommand( commandName );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function CheckDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Checks whether the current editor contents present changes when compared
// to the contents loaded into the editor at startup
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
alert( editor.checkDirty() );
}
function ResetDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Resets the "dirty state" of the editor (see CheckDirty())
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
editor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
function Focus() {
CKEDITOR.instances.editor1.focus();
}
function onFocus() {
document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
}
function onBlur() {
document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
to interact with the editor at runtime.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../../../samples/sample_posteddata.php" method="post">
<textarea cols="100" id="editor1" name="editor1" rows="10">&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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', {
on: {
focus: onFocus,
blur: onBlur,
// Check for availability of corresponding plugins.
pluginsLoaded: function( evt ) {
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
</script>
<p id="eMessage">
</p>
<div id="eButtons" style="display: none">
<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">
<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">
<input onclick="Focus();" type="button" value="Focus">
<br><br>
<input onclick="InsertHTML();" type="button" value="Insert HTML">
<input onclick="SetContents();" type="button" value="Set Editor Contents">
<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
<br>
<textarea cols="100" id="htmlArea" rows="3">&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>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>API Usage &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<script>
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
// Show the editor name and description in the browser status bar.
document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function InsertText() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'txtArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert as plain text.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
editor.insertText( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function SetContents() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Set editor contents (replace current contents).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
function GetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor1;
// Get editor contents
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
alert( editor.getData() );
}
function ExecuteCommand( commandName ) {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Execute the command.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
editor.execCommand( commandName );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function CheckDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Checks whether the current editor contents present changes when compared
// to the contents loaded into the editor at startup
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
alert( editor.checkDirty() );
}
function ResetDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Resets the "dirty state" of the editor (see CheckDirty())
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
editor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
function Focus() {
CKEDITOR.instances.editor1.focus();
}
function onFocus() {
document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
}
function onBlur() {
document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
to interact with the editor at runtime.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../../../samples/sample_posteddata.php" method="post">
<textarea cols="100" id="editor1" name="editor1" rows="10">&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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', {
on: {
focus: onFocus,
blur: onBlur,
// Check for availability of corresponding plugins.
pluginsLoaded: function( evt ) {
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
</script>
<p id="eMessage">
</p>
<div id="eButtons" style="display: none">
<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">
<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">
<input onclick="Focus();" type="button" value="Focus">
<br><br>
<input onclick="InsertHTML();" type="button" value="Insert HTML">
<input onclick="SetContents();" type="button" value="Set Editor Contents">
<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
<br>
<textarea cols="100" id="htmlArea" rows="3">&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>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View file

@ -1,59 +1,59 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Append To Page Element Using JavaScript Code &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Append To Page Element Using JavaScript Code
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
</div>
<div id="section1">
<div class="description">
<p>
The <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-appendTo">CKEDITOR.appendTo()</a></code> method serves to to place editors inside existing DOM elements. Unlike <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace">CKEDITOR.replace()</a></code>,
a target container to be replaced is no longer necessary. A new editor
instance is inserted directly wherever it is desired.
</p>
<pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
{ /* Configuration options to be used. */ }
'Editor content to be used.'
);</pre>
</div>
<script>
// This call can be placed at any point after the
// DOM element to append CKEditor to or inside the <head><script>
// in a window.onload event handler.
// Append a CKEditor instance using the default configuration and the
// provided content to the <div> element of ID "section1".
CKEDITOR.appendTo( 'section1',
null,
'<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>'
);
</script>
</div>
<br>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Append To Page Element Using JavaScript Code &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Append To Page Element Using JavaScript Code
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
</div>
<div id="section1">
<div class="description">
<p>
The <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-appendTo">CKEDITOR.appendTo()</a></code> method serves to to place editors inside existing DOM elements. Unlike <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace">CKEDITOR.replace()</a></code>,
a target container to be replaced is no longer necessary. A new editor
instance is inserted directly wherever it is desired.
</p>
<pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
{ /* Configuration options to be used. */ }
'Editor content to be used.'
);</pre>
</div>
<script>
// This call can be placed at any point after the
// DOM element to append CKEditor to or inside the <head><script>
// in a window.onload event handler.
// Append a CKEditor instance using the default configuration and the
// provided content to the <div> element of ID "section1".
CKEDITOR.appendTo( 'section1',
null,
'<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>'
);
</script>
</div>
<br>
<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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View file

@ -1,204 +1,204 @@
/*
* Copyright (c) 2003-2017, 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).
*/
/**
* 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;
}
/*
* Copyright (c) 2003-2017, 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).
*/
/**
* 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

@ -1,59 +1,59 @@
<!DOCTYPE html>
<?php
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
?>
<html>
<head>
<meta charset="utf-8">
<title>Sample &mdash; CKEditor</title>
<link 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="120"></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<?php
if (!empty($_POST))
{
foreach ( $_POST as $key => $value )
{
if ( ( !is_string($value) && !is_numeric($value) ) || !is_string($key) )
continue;
if ( get_magic_quotes_gpc() )
$value = htmlspecialchars( stripslashes((string)$value) );
else
$value = htmlspecialchars( (string)$value );
?>
<tr>
<th style="vertical-align: top"><?php echo htmlspecialchars( (string)$key ); ?></th>
<td><pre class="samples"><?php echo $value; ?></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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<?php
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
?>
<html>
<head>
<meta charset="utf-8">
<title>Sample &mdash; CKEditor</title>
<link 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="120"></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<?php
if (!empty($_POST))
{
foreach ( $_POST as $key => $value )
{
if ( ( !is_string($value) && !is_numeric($value) ) || !is_string($key) )
continue;
if ( get_magic_quotes_gpc() )
$value = htmlspecialchars( stripslashes((string)$value) );
else
$value = htmlspecialchars( (string)$value );
?>
<tr>
<th style="vertical-align: top"><?php echo htmlspecialchars( (string)$key ); ?></th>
<td><pre class="samples"><?php echo $value; ?></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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

View file

@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

File diff suppressed because one or more lines are too long

View file

@ -1,48 +1,48 @@
/**
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.dialog.add( 'myDialog', function() {
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'
}
]
}
]
};
} );
/**
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.dialog.add( 'myDialog', function() {
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'
}
]
}
]
};
} );

View file

@ -1,190 +1,190 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link rel="stylesheet" href="../../../samples/old/sample.css">
<meta name="ckeditor-sample-name" content="Using the JavaScript API to customize dialog windows">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Using the dialog windows API to customize dialog windows without changing the original editor code.">
<style>
.cke_button__mybutton_icon
{
display: none !important;
}
.cke_button__mybutton_label
{
display: inline !important;
}
</style>
<script>
CKEDITOR.on( 'instanceCreated', function( ev ){
var editor = ev.editor;
// 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() {
// 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( 'assets/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.add( 'MyButton', CKEDITOR.UI_BUTTON, {
label: 'My Dialog',
command: 'myDialogCmd'
});
});
});
// 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 == 'myDialog' && ev.editor.name == 'editor2' ) {
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'tab1' );
// Add a new text field to the "tab1" tab page.
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 "select1" field from the "tab1" tab.
infoTab.remove( 'select1' );
// Set the default value for "input1" field.
var input1 = infoTab.get( 'input1' );
input1[ 'default' ] = 'www.example.com';
// Remove the "tab2" tab page.
dialogDefinition.removeContents( 'tab2' );
// 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'
}
]
});
// Provide the focus handler to start initial focus in "customField" field.
dialogDefinition.onFocus = function() {
var urlField = this.getContentElement( 'tab1', 'customField' );
urlField.select();
};
}
});
var config = {
extraPlugins: 'dialog',
toolbar: [ [ 'MyButton' ] ]
};
</script>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using CKEditor Dialog API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog">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>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>A custom dialog is added to the editors using the <code>pluginsLoaded</code> event, from an external <a target="_blank" href="assets/my_dialog.js">dialog definition file</a>:</p>
<ol>
<li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
<li><strong>Creating a custom button</strong> &ndash; Add button to open the dialog with "My Dialog" toolbar button.</li>
</ol>
<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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', config );
</script>
<p>The below editor modify the dialog definition of the above added dialog using the <code>dialogDefinition</code> event:</p>
<ol>
<li><strong>Adding dialog tab</strong> &ndash; Add new tab "My Tab" to dialog window.</li>
<li><strong>Removing a dialog window tab</strong> &ndash; Remove "Second Tab" page from the dialog window.</li>
<li><strong>Adding dialog window fields</strong> &ndash; Add "My Custom Field" to the dialog window.</li>
<li><strong>Removing dialog window field</strong> &ndash; Remove "Select Field" selection field from the dialog window.</li>
<li><strong>Setting default values for dialog window fields</strong> &ndash; Set default value of "Text Field" text field. </li>
<li><strong>Setup initial focus for dialog window</strong> &ndash; Put initial focus on "My Custom Field" text field. </li>
</ol>
<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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor2', config );
</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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link rel="stylesheet" href="../../../samples/old/sample.css">
<meta name="ckeditor-sample-name" content="Using the JavaScript API to customize dialog windows">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Using the dialog windows API to customize dialog windows without changing the original editor code.">
<style>
.cke_button__mybutton_icon
{
display: none !important;
}
.cke_button__mybutton_label
{
display: inline !important;
}
</style>
<script>
CKEDITOR.on( 'instanceCreated', function( ev ){
var editor = ev.editor;
// 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() {
// 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( 'assets/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.add( 'MyButton', CKEDITOR.UI_BUTTON, {
label: 'My Dialog',
command: 'myDialogCmd'
});
});
});
// 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 == 'myDialog' && ev.editor.name == 'editor2' ) {
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'tab1' );
// Add a new text field to the "tab1" tab page.
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 "select1" field from the "tab1" tab.
infoTab.remove( 'select1' );
// Set the default value for "input1" field.
var input1 = infoTab.get( 'input1' );
input1[ 'default' ] = 'www.example.com';
// Remove the "tab2" tab page.
dialogDefinition.removeContents( 'tab2' );
// 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'
}
]
});
// Provide the focus handler to start initial focus in "customField" field.
dialogDefinition.onFocus = function() {
var urlField = this.getContentElement( 'tab1', 'customField' );
urlField.select();
};
}
});
var config = {
extraPlugins: 'dialog',
toolbar: [ [ 'MyButton' ] ]
};
</script>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using CKEditor Dialog API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog">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>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>A custom dialog is added to the editors using the <code>pluginsLoaded</code> event, from an external <a target="_blank" href="assets/my_dialog.js">dialog definition file</a>:</p>
<ol>
<li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
<li><strong>Creating a custom button</strong> &ndash; Add button to open the dialog with "My Dialog" toolbar button.</li>
</ol>
<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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', config );
</script>
<p>The below editor modify the dialog definition of the above added dialog using the <code>dialogDefinition</code> event:</p>
<ol>
<li><strong>Adding dialog tab</strong> &ndash; Add new tab "My Tab" to dialog window.</li>
<li><strong>Removing a dialog window tab</strong> &ndash; Remove "Second Tab" page from the dialog window.</li>
<li><strong>Adding dialog window fields</strong> &ndash; Add "My Custom Field" to the dialog window.</li>
<li><strong>Removing dialog window field</strong> &ndash; Remove "Select Field" selection field from the dialog window.</li>
<li><strong>Setting default values for dialog window fields</strong> &ndash; Set default value of "Text Field" text field. </li>
<li><strong>Setup initial focus for dialog window</strong> &ndash; Put initial focus on "My Custom Field" text field. </li>
</ol>
<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>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor2', config );
</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-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more