115 lines
4.8 KiB
JavaScript
115 lines
4.8 KiB
JavaScript
'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,dialog',
|
|
|
|
// 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:
|
|
// * https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter
|
|
// * https://docs.ckeditor.com/ckeditor4/docs/#!/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 https://docs.ckeditor.com/ckeditor4/docs/#!/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 );
|
|
}
|
|
} );
|
|
}
|
|
} );
|