Numeric Input is a plugin that allows you to use <input type = "number"> in the dialogs of CKEditor.
If you have created a dialog and want to add a field in which the user can only enter a number, the CKEditor only lets you use a text field and add a validation when the user clicks on the OK button in the dialog.
To improve the user experience and usability of their plugins, you can add the Numeric Input plugin to your editor.
With Numeric Input You can tell the browser user that the field is type = "number"; in this way the browser will:
- Prevent the user to enter non-numeric values
- Offer buttons to increase or decrease the numerical value
- Prevent the user to enter a value out of range
With Numeric Input you can define the valid number range and the value to add or subtract when the user clicks the buttons to increase or decrease.
In version 0.2 we have added a numericinput_modifyfields configuration option to apply these improvements to existing dialogs without the need to change them, please take a look at our demo.
The recommended way to install all CKEditor add-ons is to create a custom build by using Online builder. To do that, click the Add to my editor button on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to Online builder.
Note: This add-on is already selected to be a part of your current build.
Add-on installation instructions
If you want to add the plugin manually, you will need to:
- Extract the downloaded plugin
pluginsfolder of your CKEditor installation. Example:
- Enable the plugin by using the
extraPluginsconfiguration setting. Example:
config.extraPlugins = 'numericinput';
- Download and configure all its dependencies, too.
Note: The plugin may have additional requirements. Check the add-on page and documentation for more details.