Skip to content

Commit 93568a6

Browse files
committed
#23 - Document toolbar configuration
1 parent c5cedc9 commit 93568a6

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,34 @@ import Typester from 'typester-editor'
3232
new Typester({ el: document.querySelector('[contenteditable]') }) // Where document.querySelector(...) is a single DOM element.
3333
```
3434

35+
### Configuration
36+
You can configure the formatters available for a specific typester instance in two ways:
37+
38+
1. When you instatiate a Typester instance via the custom configs option:
39+
40+
```
41+
new Typester({
42+
el: document.querySelector('[contenteditable]'),
43+
configs: {
44+
toolbar: {
45+
buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
46+
}
47+
}
48+
});
49+
```
50+
51+
2. By using a data attribute on the editable container
52+
```
53+
<div contenteditable='true' data-toolbar-buttons='["bold", "italic", "h1", "h2", "orderedlist", "unorderedlist", "quote", "link"]'></div>
54+
```
55+
56+
The options available for the toolbar buttons are:
57+
- Inline formatters: `bold`, `italic`
58+
- Headers: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
59+
- Lists: `orderedlist`, `unorderedlist`
60+
- Blockquotes: `quote`
61+
- Links: `link`
62+
3563
### License
3664
Typester is released under the MIT license.
3765

0 commit comments

Comments
 (0)