/**
* Creates a link href preview button.
*
* @private
* @returns {module:ui/button/buttonview~ButtonView} The button view instance.
*/
_createPreviewButton() {
const button = new ButtonView( this.locale );
const bind = this.bindTemplate;
const t = this.t;
button.set( {
withText: true,
tooltip: t( 'Open link in new tab' )
} );
button.extendTemplate( {
attributes: {
class: [
'ck',
'ck-link-actions__preview'
],
href: bind.to( 'href', href => href && ensureSafeUrl( href ) ),
target: '_blank'
}
} );
button.bind( 'label' ).to( this, 'href', href => {
return href || t( 'This link has no URL' );
} );
button.bind( 'isEnabled' ).to( this, 'href', href => !!href );
button.template.tag = 'a';
button.template.eventListeners = {};
return button;
}
/**
* Creates a button view.
*
* @private
* @param {String} label The button label.
* @param {String} icon The button's icon.
* @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
* @returns {module:ui/button/buttonview~ButtonView} The button view instance.
*/
_createButton( label, icon, eventName ) {
const button = new ButtonView( this.locale );
button.set( {
label,
icon,
tooltip: true
} );
button.delegate( 'execute' ).to( this, eventName );
return button;
}
editor.ui.componentFactory.add( componentName, locale => {
const command = editor.commands.get( 'imageStyle' );
const view = new ButtonView( locale );
view.set( {
label: style.title,
icon: style.icon,
tooltip: true
} );
view.bind( 'isEnabled' ).to( command, 'isEnabled' );
view.bind( 'isOn' ).to( command, 'value', value => value === style.name );
this.listenTo( view, 'execute', () => editor.execute( 'imageStyle', { value: style.name } ) );
return view;
} );
editor.ui.componentFactory.add( SUPERSCRIPT, locale => {
const command = editor.commands.get( SUPERSCRIPT );
const view = new ButtonView( locale );
view.set( {
label: t( 'Superscript' ),
icon: superscriptIcon,
tooltip: true
} );
view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// Execute command.
this.listenTo( view, 'execute', () => editor.execute( SUPERSCRIPT ) );
return view;
} );
editor.ui.componentFactory.add( STRIKETHROUGH, locale => {
const command = editor.commands.get( STRIKETHROUGH );
const view = new ButtonView( locale );
view.set( {
label: t( 'Strikethrough' ),
icon: strikethroughIcon,
keystroke: 'CTRL+SHIFT+X',
tooltip: true
} );
view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// Execute command.
this.listenTo( view, 'execute', () => editor.execute( STRIKETHROUGH ) );
return view;
} );
editor.ui.componentFactory.add( ITALIC, locale => {
const command = editor.commands.get( ITALIC );
const view = new ButtonView( locale );
view.set( {
label: t( 'Italic' ),
icon: italicIcon,
keystroke: 'CTRL+I',
tooltip: true
} );
view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// Execute command.
this.listenTo( view, 'execute', () => editor.execute( ITALIC ) );
return view;
} );
/**
* Creates a button view.
*
* @private
* @param {String} label The button label.
* @param {String} icon The button's icon.
* @param {String} className The additional button CSS class name.
* @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
* @returns {module:ui/button/buttonview~ButtonView} The button view instance.
*/
_createButton( label, icon, className, eventName ) {
const button = new ButtonView( this.locale );
button.set( {
label,
icon,
tooltip: true
} );
button.extendTemplate( {
attributes: {
class: className
}
} );
if ( eventName ) {
button.delegate( 'execute' ).to( this, eventName );
}
return button;
}