@medicplus/js-document-editor NPM

jEditor (js-document-editor)

What is jEditor?

jEditor (js-document-editor) is a simple and extensible JavaScript document editor, which allows you to define a document and then drag and resize elements.

Then you can get the position and configuration values from all the elements on the document and generate it as a PDF (using external libraries like html2Canvas and jsPDF).

A simple and extensible JavaScript document editor

Getting started

The easiest way to get started is to use the Unpkg CDN in your website:

<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/@medicplus/js-document-editor/dist/jeditor.css"
/>
<script
  src="https://unpkg.com/@medicplus/js-document-editor/dist/jeditor.js"
  type="module"
></script>

Using yarn:

yarn add @medicplus/js-document-editor

Using npm:

npm install @medicplus/js-document-editor --save

Now you are ready to use your editor, just create a <div id="myEditor"></div> element in your website:

// This is not required if you are using CDN imports
import { jEditor } from "@medic-plus/js-document-editor";

// Let's define a simple element
const elements = [{
    key: "my-element",
    text: "My Custom Element",
    value: "<p>Lorem ipsum dolor sit amec...</p>";
    width: 200;
    height: 20;
}];

// Now let's add it to the page, you can also set an empty array and use the UI to manipulate the elements
const data = [{
  element: "my-element";
  left: 100;
  top: 200;
  width: 250;
  height: 25;
}];

// Finally, lets start the editor, this will create a full screen editor
const options = { container: "#myEditor", elements: elements, units: "in" };
const myEditor = new jEditor(options, data);