jEditor
jEditor (js-document-editor) is a package that can help you show a simple interface and work as a document creation tool, where the user can move and resize the elements how they want inside a page (similar to Word).
Installing jEditor
You can download it directly or cloning the repository and copying the dist folder to your project.
NPM
This package is hosted as a npm package and can be installed directly from official repository using:
npm i @medicplus/js-document-editor
Contributing
To make changes to this project is recommended to run this package inside a docker container using node version 18:
docker run -it --rm -v $(pwd):/app node:18 bash
Usage
You need to import the css and js files (and fontawesome css in case you want it), then create a div with class jEditor
<html>
<head>
<link href="css/jeditor.css" rel="stylesheet" />
<link href="fa/css/all.min.css" rel="stylesheet" />
<!--If you wish to use fontawesome-->
</head>
<body>
<div class="jEditor"></div>
<script src="js/jeditor.js"></script>
<script>
const jEditor = $.jEditor(options);
</script>
</body>
</html>Global Options
| option | default | description |
|---|---|---|
| background | String: null | URL or BASE64 of a background image |
| container | String: ".jEditor" | querySelector for editor container |
| data | Array: [] | set elements on start |
| dpi | Integer: 150 | dpi used as base for the paperSizes |
| elements | Array: [] | elements available to be added to the document |
| elementAction | String: "addElement" | default action on element click |
| elementFunctions | Array: [...] | buttons set per shown element |
| events | editorFunctions | editor actions (check src/js/functions.js) |
| extraFunctions | Array: [] | extra functions shown on top of settings |
| helper | Boolean: true | display or not helper (when moving or resizing objects) |
| locale | Array: [...] | localizable texts shown in editor |
| paperSize | String: "a4" | paper selected |
| paperSizes | Array: [...] | list of paper sizes (name, width and height in pixels) |
| rendered | Boolean: false | sets objects as rendered (not draggable or resizable) |
| saveButton | Boolean: false | triggers for save button, needs an element with .btn[data-action=saveData]
|
| settings | Array: [...] | actions shown in settings panel |
| sizeDecimals | Integer: 1 | amount of decimals shown in helper |
| sizeUnit | String: "cm" | default size for helper (mm, cm, inch, px) |
| title | String: "jEditor" | title shown in side panel |
| zoom | Double: 1 | default zoom at render |
| zoomIncrement | Double: 0.1 | amount of zoom increased or decreased |
Locale
You can customize your locale to your needs, the defaults are:
locale: {
width: 'Width',
height: 'Height',
topMargin: 'Top margin',
leftMargin: 'Left margin',
return: 'Return',
paperChange: 'The paper has been set to :size',
saved: 'Changes saved',
hPosition: 'Horizontal position',
vPosition: 'Vertical position',
textAlign: 'Text align',
fontSize: 'Font size',
placeholder: 'Placeholder'
},
Extra Functions
Extra functions are shown on top of settings and can do a series of actions, for example:
function defaultValues() {
_jeditor.setData(defaultData);
_jeditor.renderObjects();
}
function saveData() {
_jeditor.getOptions().events.saveData();
var data = _jeditor.getData();
alert(`Saved data: ${data.length} elements`);
}You need to set your functions before $.jEditor()
[
{action: 'defaultValues', content: '<span class="fa fa-magic"></span> Default View', class: 'btn', show: true},
{action: 'saveData', content: '<span class="fa fa-save"></span> Save', class: 'btn', show: true},
]
Paper Sizes
Paper sizes are defined by pixels (based on your dpi) default values are:
paperSizes: {
letter: {name: 'Letter', width: 1276, height: 1648},
a4: {name: 'A4', width: 1240, height: 1754},
a5: {name: 'A5', width: 1240, height: 874}
},
Settings
Settings are shown at the bottom of the panel, basic functions are:
- toggleRender: set objects as rendered (not draggable or resizable)
- changePaper: changes the page size to the next paperSize in the array (goes to first if last is active)
- zoomOut: decreases the zoom by the amount set on zoomIncrement
- zoomIn: increases the zoom by the amount set on zoomIncrement
- zoomReset: sets the zoom to fit the page fully visible (horizontally)
settings: [
{action: 'toggleRender', content: '<span class="fa fa-edit"></span>', class: 'btn', show: true},
{action: 'changePaper', content: '<span class="fa fa-file"></span>', class: 'btn', show: true},
{action: 'zoomOut', content: '<span class="fa fa-minus"></span>', class: 'btn', show: true},
{action: 'zoomIn', content: '<span class="fa fa-plus"></span>', class: 'btn', show: true},
{action: 'zoomReset', content: '<span class="fa fa-expand-arrows-alt"></span>', class: 'btn', show: true},
],
Functions
After executing var jEditor = $.jEditor() you can use that variable or the global variable _jeditor to access some of it functions:
- getOptions(): return the options set at runtime.
- setOptions(options): return a merge of the options.
- getData(): return the data (values) set at runtime.
- setData(options): sets objects data (need to run renderObjects() to show it on editor).
- renderObjects(): Executes the event renderObjects (creates elements based on data).
- setPaper(paperSize): Executes the event setPaper (sets page size).
- setBackround(url): sets the background-image property of the page and as the background option (event setPageBackground()).
- clearBackround(): clears the page background and sets the option as null.
-
unsaved(): sets a
beforeunloadas en event listener. (event unsaved()). - getObject(element): returns the object inside the editor data with the index of the element sent as parameter.
Events
You can run the editor functions anytime you need it, to access any function just use _jeditor.getOptions().events.xxxx() the events available are:
All functions takes the first parameter as a click event where it gets the targeted DOM element with the attribute [data-element=n]
- addElement(event): gets targeted element and adds the object to the page.
- removeElement(event): gets targeted element and removes the object from the page.
- modifyElement(event): gets targeted element and shows settings panel for the element.
- cancelModifyElement(event): hides the settings panel to show the element list.
- zoomIn(): increases the zoom by the amount set on zoomIncrement.
- zoomOut(): decreases the zoom by the amount set on zoomIncrement.
- zoomReset(): sets the zoom to fit the page fully visible (horizontally).
- changePaper(): changes the page size to the next paperSize in the array (goes to first if last is active).
- setPaper(event, paperSize): sets the page size to the paperSize value (has to exists in paperSizes).
- renderObjects(): renders the objects based on the data.
- toast(text, css, timer): shows a toast with the css as class (example "bg-success") for the timer amount (ms).
-
unsaved(): sets a
beforeunloadas en event listener. -
saveData(): removes
beforeunloadevent listener and shows a toast. - setPageBackround(url): sets the background-image property of the page and as the background option.
Elements
Elements are shown in the side panel and when clicked are added to the page as an object, can be defined with this options:
| option | default | description |
|---|---|---|
| align | String: "initial" | CSS value for text-align |
| fontSize | Integer: 16 | font size in pixels |
| height | Integer: 20 | height of the displayed object in pixels |
| left | Integer: 0 | left position in pixels from start of page |
| placeholder | String: "" | text shown inside the element before the value |
| settings | Object: {...} | defines if an input is shown when editing an element |
| settings.align | Boolean: true | shows or hides align select in side panel |
| settings.fontSize | Boolean: true | shows or hides font size input in side panel |
| settings.placeholder | Boolean: true | shows or hides placeholder input in side panel |
| top | Integer: 0 | top position in pixels from start of page |
| value | String: "" | value displayed on the object (could be HTML) |
| width | Integer: 100 | width of the displayed object in pixels |
Data
Data can be return with _jeditor.getData() or set with _jeditor.setData(...) (and run renderObjects() to show them), this values can have this options:
| option | default | description |
|---|---|---|
| element | Integer: null | index of item in element array |
| fontSize | Integer: 16 | font size in pixels |
| width | Integer: 100 | width of the displayed object in pixels |
| height | Integer: 20 | height of the displayed object in pixels |
| top | Integer: 0 | top position in pixels from start of page |
| left | Integer: 0 | left position in pixels from start of page |
| align | String: "initial" | CSS value for text-align |
| placeholder | String: "" | text shown inside the element before the value |
| value | String: "" | value displayed on the object |
Dependencies
NodeJS v18
License
jEditor is release under the MIT license. You are free to use, modify and distribute this software.
