Numeric Input para el CKEditor
Demo
This page shows a sample plugin that uses the Numeric Input in two fields of a dialog.
This is the code used to create the plugin:
requires: 'dialog,numericinput',
init: function( editor ) {
editor.addCommand( 'sample', new CKEDITOR.dialogCommand( 'sampleDialog' ) );
editor.ui.addButton( 'Sample', {
label: 'Demo dialog',
command: 'sample',
toolbar: 'insert'
});
}
});
As you can see, in the definition we have added the 'numericinput' reference in the 'requires' property.
And this is the dialog:
return {
title: 'A Dialog',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'main',
label: 'Settings',
elements: [
{
type: 'text',
id: 'normal',
label: 'Normal input'
},
{
type: 'number',
id: 'sample-number',
label: 'A numeric input'
},
{
type: 'number',
id: 'speed',
label: 'Numbers restricted between 0 and 1000, steps in 100',
'default': 200,
min: 0,
max: 1000,
step: 100
}
]
}
],
onOk: function() {
var dialog = this;
// dialog.getValueOf( 'main', 'normal' );
// dialog.getValueOf( 'main', 'sample-number' );
}
};
});
Finally, we modify also the default Table dialog by changing the border, padding and spacing to numeric inputs (it can be done also on the width and height, but then the users won't be able to specify the units as percentaje, eg: width = 100%)
config.numericinput_modifyfields = {
'table': {
'info' : {
'txtRows': {
'min': 1
},
'txtCols': {
'min': 1
},
'txtBorder': {
'min': 0,
'controlStyle': 'width: 4em',
},
'txtCellSpace': {
'min': 0,
'controlStyle': 'width: 4em',
},
'txtCellPad': {
'min': 0,
'controlStyle': 'width: 4em',
}
}
}
}
You can test it using this editor: