You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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