Skip to content

Commit 02ca3ce

Browse files
committed
Add README to custom node example
1 parent 3d22bcc commit 02ca3ce

1 file changed

Lines changed: 33 additions & 0 deletions

File tree

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Custom Nodes in SuperDoc
2+
3+
You can create custom nodes (or extensions/plugins). For this example we'll create a simple custom node and pass it to the editor.
4+
5+
First, [we've created a basic example of a custom node here](https://github.com/Harbour-Enterprises/SuperDoc/blob/main/examples/vue-custom-node-example/src/plugins/MyCustomNodePlugin.js) showing __some__ of the API we have access to.
6+
7+
We simply import it into our document editor, using:
8+
```
9+
import { myCustomNode } from '../plugins/MyCustomNodePlugin';
10+
```
11+
12+
And pass it to the editor via our config:
13+
```
14+
const config = {
15+
// Our config...
16+
editorExtensions: [myCustomNode],
17+
}
18+
```
19+
20+
And that's it! Our editor now can use our custom node.
21+
22+
## Custom commands
23+
Since our custom node creates a custom command `insertCustomNode` that takes an **object** as a param with keys `content` and `id`, we can use it via:
24+
```
25+
activeEditor.commands.insertCustomNode({ content, id })
26+
```
27+
28+
## Running the example
29+
```
30+
npm install && npm run dev
31+
```
32+
33+
The example inserts two instances of our custom node - once using a generic editor `insertContent` command and some HTML, and the second time using our newly-created custom command `insertCustomNode`

0 commit comments

Comments
 (0)