Adding CKEditor 4.6.1 library with all required plugins

This commit is contained in:
Manuel Cillero 2017-08-02 09:40:23 +02:00
parent 4fe068fd14
commit b2f68ae559
1085 changed files with 146026 additions and 0 deletions

View file

@ -0,0 +1,23 @@
.mediumBorder {
border-width: 2px;
}
.thickBorder {
border-width: 5px;
}
img.thickBorder, img.mediumBorder {
border-style: solid;
border-color: #CCC;
}
.important.soMuch {
margin: 25px;
padding: 25px;
background: red;
border: none;
}
span.redMarker {
background-color: red;
}
.invisible {
opacity: 0.1;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -0,0 +1,36 @@
.simplebox {
padding: 8px;
margin: 10px;
background: #eee;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
}
.simplebox-title, .simplebox-content {
box-shadow: 0 1px 1px #ddd inset;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
}
.simplebox-title {
margin: 0 0 8px;
padding: 5px 8px;
}
.simplebox-content {
padding: 0 8px;
}
.simplebox-content::after {
content: '';
display: block;
clear: both;
}
.simplebox.align-right {
float: right;
}
.simplebox.align-left {
float: left;
}
.simplebox.align-center {
margin-left: auto;
margin-right: auto;
}

View file

@ -0,0 +1,51 @@
// Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget
// and is committed to the widget) is only possible when the dialog is opened by the Widgets System
// (i.e. the widgetDef.dialog property is set).
// When you are opening the dialog window by yourself, you need to take care of this by yourself too.
CKEDITOR.dialog.add( 'simplebox', function( editor ) {
return {
title: 'Edit Simple Box',
minWidth: 200,
minHeight: 100,
contents: [
{
id: 'info',
elements: [
{
id: 'align',
type: 'select',
label: 'Align',
items: [
[ editor.lang.common.notSet, '' ],
[ editor.lang.common.alignLeft, 'left' ],
[ editor.lang.common.alignRight, 'right' ],
[ editor.lang.common.alignCenter, 'center' ]
],
// When setting up this field, set its value to the "align" value from widget data.
// Note: Align values used in the widget need to be the same as those defined in the "items" array above.
setup: function( widget ) {
this.setValue( widget.data.align );
},
// When committing (saving) this field, set its value to the widget data.
commit: function( widget ) {
widget.setData( 'align', this.getValue() );
}
},
{
id: 'width',
type: 'text',
label: 'Width',
width: '50px',
setup: function( widget ) {
this.setValue( widget.data.width );
},
commit: function( widget ) {
widget.setData( 'width', this.getValue() );
}
}
]
}
]
};
} );

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 B

View file

@ -0,0 +1,114 @@
'use strict';
// Register the plugin within the editor.
CKEDITOR.plugins.add( 'simplebox', {
// This plugin requires the Widgets System defined in the 'widget' plugin.
requires: 'widget',
// Register the icon used for the toolbar button. It must be the same
// as the name of the widget.
icons: 'simplebox',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
// Register the editing dialog.
CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );
// Register the simplebox widget.
editor.widgets.add( 'simplebox', {
// Allow all HTML elements, classes, and styles that this widget requires.
// Read more about the Advanced Content Filter here:
// * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
// * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
allowedContent:
'div(!simplebox,align-left,align-right,align-center){width};' +
'div(!simplebox-content); h2(!simplebox-title)',
// Minimum HTML which is required by this widget to work.
requiredContent: 'div(simplebox)',
// Define two nested editable areas.
editables: {
title: {
// Define CSS selector used for finding the element inside widget element.
selector: '.simplebox-title',
// Define content allowed in this nested editable. Its content will be
// filtered accordingly and the toolbar will be adjusted when this editable
// is focused.
allowedContent: 'br strong em'
},
content: {
selector: '.simplebox-content'
}
},
// Define the template of a new Simple Box widget.
// The template will be used when creating new instances of the Simple Box widget.
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content...</p></div>' +
'</div>',
// Define the label for a widget toolbar button which will be automatically
// created by the Widgets System. This button will insert a new widget instance
// created from the template defined above, or will edit selected widget
// (see second part of this tutorial to learn about editing widgets).
//
// Note: In order to be able to translate your widget you should use the
// editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.
button: 'Create a simple box',
// Set the widget dialog window name. This enables the automatic widget-dialog binding.
// This dialog window will be opened when creating a new widget or editing an existing one.
dialog: 'simplebox',
// Check the elements that need to be converted to widgets.
//
// Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element
// so it is not a real DOM element yet. This is caused by the fact that upcasting is performed
// during data processing which is done on DOM represented by JavaScript objects.
upcast: function( element ) {
// Return "true" (that element needs to converted to a Simple Box widget)
// for all <div> elements with a "simplebox" class.
return element.name == 'div' && element.hasClass( 'simplebox' );
},
// When a widget is being initialized, we need to read the data ("align" and "width")
// from DOM and set it by using the widget.setData() method.
// More code which needs to be executed when DOM is available may go here.
init: function() {
var width = this.element.getStyle( 'width' );
if ( width )
this.setData( 'width', width );
if ( this.element.hasClass( 'align-left' ) )
this.setData( 'align', 'left' );
if ( this.element.hasClass( 'align-right' ) )
this.setData( 'align', 'right' );
if ( this.element.hasClass( 'align-center' ) )
this.setData( 'align', 'center' );
},
// Listen on the widget#data event which is fired every time the widget data changes
// and updates the widget's view.
// Data may be changed by using the widget.setData() method, which we use in the
// Simple Box dialog window.
data: function() {
// Check whether "width" widget data is set and remove or set "width" CSS style.
// The style is set on widget main element (div.simplebox).
if ( !this.data.width )
this.element.removeStyle( 'width' );
else
this.element.setStyle( 'width', this.data.width );
// Brutally remove all align classes and set a new one if "align" widget data is set.
this.element.removeClass( 'align-left' );
this.element.removeClass( 'align-right' );
this.element.removeClass( 'align-center' );
if ( this.data.align )
this.element.addClass( 'align-' + this.data.align );
}
} );
}
} );