1.3.3 • Published 7 years ago
ckeditor-ruler v1.3.3
Simple Ruler
Description
A ruler plugin for CKEditor displays the horizontal dimension of the page. You can modify it on the ruler using a mouse.
Demo
You can try it on the demo page.
Getting Started
Manual
Download the plugin from the official CKEditor add-ons list and enable them by editing config.js
:
config.extraPlugins = 'ruler';
NPM
Install Simple Ruler as a development dependency:
npm install ckeditor-ruler --save-dev
Init CKEditor with the plugin:
window.onload = function() {
CKEDITOR.plugins.addExternal('ruler', '/node_modules/ckeditor-ruler/');
CKEDITOR.config.extraPlugins = 'ruler';
CKEDITOR.replace('editor');
};
Options
CKEDITOR.config.ruler = {
values: 21, // segment number of the ruler
step: 0.25, // accuracy of sliders
sliders: {
left: 2, // left slider value
right: 19 // right slider value (21-19 = 2)
},
padding: {
top: 20, // top 'canvas' padding (px)
bottom: 20 // bottom 'canvas' padding (px)
}
};
API
Plugin dispatches updateRuler
event as soon as any of slider's values have been changed:
editor.fire('updateRuler', { left: Number, right: Number });
Plugin is subscribed to setRulerPadding
editor's event, so you can fire the event to change ruler's values programmatically:
editor.fire('setRulerPadding', { left: Number, right: Number });
Browser compatibility
Originally this plugin was build for an Electron library, therefore it wasn't tested in other browsers.
License
© 2016, LOVATA Group, LLC under GNU GPL v3.
Develped by Aleksandra Shinkevich.