https://github.com/lofcz/tiptap-blazor
Self-contained editor built with TipTap/React targeting Blazor
https://github.com/lofcz/tiptap-blazor
blazor react wysiwyg
Last synced: 8 months ago
JSON representation
Self-contained editor built with TipTap/React targeting Blazor
- Host: GitHub
- URL: https://github.com/lofcz/tiptap-blazor
- Owner: lofcz
- License: mit
- Created: 2024-12-28T16:23:52.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-01-11T13:52:09.000Z (9 months ago)
- Last Synced: 2025-02-15T18:58:25.207Z (8 months ago)
- Topics: blazor, react, wysiwyg
- Language: JavaScript
- Homepage:
- Size: 427 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TipTap Blazor
This is an opinionated editor built with [TipTap](https://github.com/ueberdosis/tiptap) and [React](https://github.com/facebook/react) bundled into a umd package consumable by Blazor (and other frameworks).
## Getting Started
```js
npm install
npm run build
```
This produces following files in `dist` folder:
- `react.production.min.js`
- `react-dom.production.min.js`
- `tiptap-island.umd.js`
- `tiptap-island.css`
*This library currently uses React 19 and a [custom](https://github.com/lofcz/tiptap-blazor/blob/master/rollup.config.react.js) process to build the UMD version, which is no longer done upstream.*
Unless React is already available in `window`, import it via the first two files in whatever way your system supports. One would be to use the plain old `script` tags:
```html
```
Next, import `tiptap-island.umd.js` and `tiptap-island.css`:
```html
```
*Note that while this is the simplest way, using some loader is recommended.*
To see the above in action, run: `npm run test`.
## Creating an editor
Tiptap Blazor sets `window.TipTapIsland` to a function that can be called to construct an editor instance:
```js
let editor = window["TipTapIsland"].create(pars.id, {
content: "hello world,
onUpdate: (html) => {
console.log(html);
}
});
```
## API
The following methods are available on the editor:
| Method | Description |
|--------|-------------|
| `getContent()` | Returns content of the editor |
| `setContent(html)` | Sets content of the editor |
| `destroy()` | Removes editor and associated events |
| `setEditable(editable)` | Enables/disables input |
| `isEditable` | Returns whether input is enabled |
## Development
Start Vite environment by running `npm run dev`.