@richhtmleditor/js 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -112
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,112 +1,122 @@
|
|
|
1
|
-
# @richhtmleditor/js
|
|
2
|
-
|
|
3
|
-
Vanilla JavaScript API for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). Mount a full editor in any DOM container without a framework — ideal for legacy apps, web components, and static sites.
|
|
4
|
-
|
|
5
|
-
**Current release: 1.
|
|
6
|
-
|
|
7
|
-
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
-
|
|
9
|
-
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
-
|
|
11
|
-
### What's in 1.
|
|
12
|
-
|
|
13
|
-
- **`createRichHtmlEditor`** — creates a mount div inside your container and returns an `EditorInstance`
|
|
14
|
-
- **Same options as core** — `content`, `toolbar`, `features`, `plugins`, `onChange`, `onSave`, and more
|
|
15
|
-
- **Clean teardown** — `destroy()` removes the internal mount element
|
|
16
|
-
- Re-exports all public symbols from `@richhtmleditor/core`
|
|
17
|
-
|
|
18
|
-
> Ships as ESM with TypeScript declarations. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS for toolbar and content chrome.
|
|
19
|
-
|
|
20
|
-
**Keywords:** `richhtmleditor` `javascript` `vanilla-js` `wysiwyg` `rich-text-editor`
|
|
21
|
-
|
|
22
|
-
## Install
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install @richhtmleditor/js @richhtmleditor/themes
|
|
26
|
-
# Adds @richhtmleditor/core automatically.
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## Usage — quick start
|
|
30
|
-
|
|
31
|
-
```html
|
|
32
|
-
<div id="editor-host" style="min-height: 320px"></div>
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
```ts
|
|
36
|
-
import { createRichHtmlEditor } from "@richhtmleditor/js";
|
|
37
|
-
import "@richhtmleditor/themes/richhtmleditor.css";
|
|
38
|
-
|
|
39
|
-
const host = document.getElementById("editor-host")!;
|
|
40
|
-
|
|
41
|
-
const editor = createRichHtmlEditor(host, {
|
|
42
|
-
content: "<p>Hello <strong>world</strong></p>",
|
|
43
|
-
toolbar: { preset: "standard" },
|
|
44
|
-
features: { tables: true, media: true },
|
|
45
|
-
onChange: (content) => console.log(content.html)
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
// Later:
|
|
49
|
-
editor.commands.insertTable(3, 4);
|
|
50
|
-
editor.destroy();
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Usage — enterprise plugins
|
|
54
|
-
|
|
55
|
-
```ts
|
|
56
|
-
import { createRichHtmlEditor } from "@richhtmleditor/js";
|
|
57
|
-
import { createAiPlugin } from "@richhtmleditor/ai";
|
|
58
|
-
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
59
|
-
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
|
|
60
|
-
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
61
|
-
|
|
62
|
-
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
63
|
-
|
|
64
|
-
const editor = createRichHtmlEditor(host, {
|
|
65
|
-
toolbar: { preset: "full" },
|
|
66
|
-
features: gate.features,
|
|
67
|
-
plugins: [
|
|
68
|
-
createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
|
|
69
|
-
createCommentsPlugin({ author: "Reviewer" }),
|
|
70
|
-
createWorkflowsPlugin({ actor: "Legal", role: "editor" })
|
|
71
|
-
]
|
|
72
|
-
});
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Usage — export for preview
|
|
76
|
-
|
|
77
|
-
```ts
|
|
78
|
-
const preview = editor.exportForPreview({
|
|
79
|
-
workflowState: "approved",
|
|
80
|
-
includePrintCss: true
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
// preview.fullHtml — standalone document for iframe or @doc-preview
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
## API
|
|
87
|
-
|
|
88
|
-
### `createRichHtmlEditor(container, options)`
|
|
89
|
-
|
|
90
|
-
| Parameter | Type | Description |
|
|
91
|
-
| --- | --- | --- |
|
|
92
|
-
| `container` | `HTMLElement` | **Required.** Parent element; an internal `.de-js-host` div is appended. |
|
|
93
|
-
| `options` | `Omit<CreateEditorOptions, "element">` | All `createEditor` options except `element`. |
|
|
94
|
-
|
|
95
|
-
Returns `RichHtmlEditorInstance` (alias for `EditorInstance`).
|
|
96
|
-
|
|
97
|
-
### `RichHtmlEditorInstance`
|
|
98
|
-
|
|
99
|
-
Same as `EditorInstance` from `@richhtmleditor/core` — `commands`, `getHTML()`, `getJSON()`, `setContent()`, `exportForPreview()`, `on()`, `destroy()`, etc.
|
|
100
|
-
|
|
101
|
-
## Related packages
|
|
102
|
-
|
|
103
|
-
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
|
|
104
|
-
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
105
|
-
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
|
|
106
|
-
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
|
|
107
|
-
- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
|
|
108
|
-
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
[
|
|
1
|
+
# @richhtmleditor/js
|
|
2
|
+
|
|
3
|
+
Vanilla JavaScript API for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). Mount a full editor in any DOM container without a framework — ideal for legacy apps, web components, and static sites.
|
|
4
|
+
|
|
5
|
+
**Current release: 1.1.1** — Depends on `@richhtmleditor/core` **^1.1.1**.
|
|
6
|
+
|
|
7
|
+
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
+
|
|
9
|
+
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
+
|
|
11
|
+
### What's in 1.1.1
|
|
12
|
+
|
|
13
|
+
- **`createRichHtmlEditor`** — creates a mount div inside your container and returns an `EditorInstance`
|
|
14
|
+
- **Same options as core** — `content`, `toolbar`, `features`, `plugins`, `onChange`, `onSave`, and more
|
|
15
|
+
- **Clean teardown** — `destroy()` removes the internal mount element
|
|
16
|
+
- Re-exports all public symbols from `@richhtmleditor/core`
|
|
17
|
+
|
|
18
|
+
> Ships as ESM with TypeScript declarations. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS for toolbar and content chrome.
|
|
19
|
+
|
|
20
|
+
**Keywords:** `richhtmleditor` `javascript` `vanilla-js` `wysiwyg` `rich-text-editor`
|
|
21
|
+
|
|
22
|
+
## Install
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @richhtmleditor/js @richhtmleditor/themes
|
|
26
|
+
# Adds @richhtmleditor/core automatically.
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage — quick start
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<div id="editor-host" style="min-height: 320px"></div>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { createRichHtmlEditor } from "@richhtmleditor/js";
|
|
37
|
+
import "@richhtmleditor/themes/richhtmleditor.css";
|
|
38
|
+
|
|
39
|
+
const host = document.getElementById("editor-host")!;
|
|
40
|
+
|
|
41
|
+
const editor = createRichHtmlEditor(host, {
|
|
42
|
+
content: "<p>Hello <strong>world</strong></p>",
|
|
43
|
+
toolbar: { preset: "standard" },
|
|
44
|
+
features: { tables: true, media: true },
|
|
45
|
+
onChange: (content) => console.log(content.html)
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// Later:
|
|
49
|
+
editor.commands.insertTable(3, 4);
|
|
50
|
+
editor.destroy();
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Usage — enterprise plugins
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { createRichHtmlEditor } from "@richhtmleditor/js";
|
|
57
|
+
import { createAiPlugin } from "@richhtmleditor/ai";
|
|
58
|
+
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
59
|
+
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
|
|
60
|
+
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
61
|
+
|
|
62
|
+
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
63
|
+
|
|
64
|
+
const editor = createRichHtmlEditor(host, {
|
|
65
|
+
toolbar: { preset: "full" },
|
|
66
|
+
features: gate.features,
|
|
67
|
+
plugins: [
|
|
68
|
+
createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
|
|
69
|
+
createCommentsPlugin({ author: "Reviewer" }),
|
|
70
|
+
createWorkflowsPlugin({ actor: "Legal", role: "editor" })
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Usage — export for preview
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
const preview = editor.exportForPreview({
|
|
79
|
+
workflowState: "approved",
|
|
80
|
+
includePrintCss: true
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
// preview.fullHtml — standalone document for iframe or @doc-preview
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
### `createRichHtmlEditor(container, options)`
|
|
89
|
+
|
|
90
|
+
| Parameter | Type | Description |
|
|
91
|
+
| --- | --- | --- |
|
|
92
|
+
| `container` | `HTMLElement` | **Required.** Parent element; an internal `.de-js-host` div is appended. |
|
|
93
|
+
| `options` | `Omit<CreateEditorOptions, "element">` | All `createEditor` options except `element`. |
|
|
94
|
+
|
|
95
|
+
Returns `RichHtmlEditorInstance` (alias for `EditorInstance`).
|
|
96
|
+
|
|
97
|
+
### `RichHtmlEditorInstance`
|
|
98
|
+
|
|
99
|
+
Same as `EditorInstance` from `@richhtmleditor/core` — `commands`, `getHTML()`, `getJSON()`, `setContent()`, `exportForPreview()`, `on()`, `destroy()`, etc.
|
|
100
|
+
|
|
101
|
+
## Related packages
|
|
102
|
+
|
|
103
|
+
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
|
|
104
|
+
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
105
|
+
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
|
|
106
|
+
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
|
|
107
|
+
- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
|
|
108
|
+
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
|
|
109
|
+
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
|
|
110
|
+
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
|
|
111
|
+
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
|
|
112
|
+
- [`@richhtmleditor/collab`](https://www.npmjs.com/package/@richhtmleditor/collab) — Yjs collaboration plugin.
|
|
113
|
+
- [`@richhtmleditor/diagrams`](https://www.npmjs.com/package/@richhtmleditor/diagrams) — Mermaid diagrams plugin.
|
|
114
|
+
- [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
|
|
115
|
+
- [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF/HTML export plugin.
|
|
116
|
+
- [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — real-time spell check plugin.
|
|
117
|
+
- [`@richhtmleditor/templates`](https://www.npmjs.com/package/@richhtmleditor/templates) — document templates plugin.
|
|
118
|
+
- [`@richhtmleditor/mentions`](https://www.npmjs.com/package/@richhtmleditor/mentions) — @ mentions plugin.
|
|
119
|
+
|
|
120
|
+
## License
|
|
121
|
+
|
|
122
|
+
[MIT](./LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@richhtmleditor/js",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Vanilla JavaScript API for Rich HTML Editor.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"prepack": "node ../../scripts/assert-pack-ready.mjs"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@richhtmleditor/core": "^1.
|
|
24
|
+
"@richhtmleditor/core": "^1.1.1"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [
|
|
27
27
|
"richhtmleditor",
|