Numeric Input para el CKEditor
Demo
Esta página muestra un ejemplo de un plugin que utiliza el componente Numeric Input en dos campos de un diálogo.
Este es el código utilizado:
requires: 'dialog,numericinput',
init: function( editor ) {
editor.addCommand( 'sample', new CKEDITOR.dialogCommand( 'sampleDialog' ) );
editor.ui.addButton( 'Sample', {
label: 'Demo dialog',
command: 'sample',
toolbar: 'insert'
});
}
});
En la definición del plugin añadimos en la linea de requires el 'numericinput'.
Y este es el diálogo:
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' );
}
};
});
Por último, también modificamos el diálogo de Tablas para cambiar los elementos de filas, columnas, borde, padding y spacing a campos numéricos (también se puede hacer con la anchura y altura, pero entonces los usuarios no podrán especificar las unidades como porcentaje, p.ej: 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',
}
}
}
}
Pueden probar este ejemplo en el siguiente editor: