Comments (8)
Hey there, I wanted this feature for a project I'm working on so that I could load the state of the editor based on a DB and things like that. I think I have coded up a pretty decent solution if there isn't one already.
from blocknote.
This should have been closed here: #154
See docs @ https://www.blocknotejs.org/docs/editor
from blocknote.
Is there a way to load this initial content from raw html or the json that tiptap gives back? For me it was a little awkard having to create the blocks and then pass it to the editor as the initial content. And if so, is this content easily storable in a database or the like to load later?
from blocknote.
It's possible to convert to/from HTML, but not recommended. See https://www.blocknotejs.org/docs/converting-blocks
from blocknote.
This should have been closed here: #154
See docs @ https://www.blocknotejs.org/docs/editor
This shows how to store it, thanks.
from blocknote.
Hey there, sorry to bother again. The only problem I see with this method of loading initial data is doing it with asynchronous data. I tried it utilizing a useEffect hook for data fetching which then sets the data to a state variable. This doesn't load as initial content because the editor is done being instantiated before the data can be fetched. Is there a better way to accomplish this?
from blocknote.
two options
a) you could create the editor only after the data has been fetched
b) you could replace the initial content with replaceblocks
when the data has been loaded: https://www.blocknotejs.org/docs/manipulating-blocks#replacing-blocks (little less nice imo)
from blocknote.
Got it thanks so much.
from blocknote.
Related Issues (20)
- When press "Enter", editor does not insert a new block in the custom block HOT 3
- Table e2e tests
- The cursor position is not correct.
- Real-time collaboration causes an infinite stream of updates when focusing the editor on a standard Next.js app HOT 3
- Block Id not found after dragging and resizing image
- Issue with Custom BlockTypeDropdown Item Display and Click Event HOT 2
- InitialBlock ID is 'initialBlockId'.It will replace the initialEditorContent that contains the same id. HOT 5
- When the editor contains one empty block, pressing the 'Del' key will raise an error.
- Remove the logs when pasting
- In order to add the outline and anchor for the Header blocks, Add the id in the block. HOT 1
- Custom toolbar HOT 1
- RangeError: Invalid content for node blockcontainer HOT 1
- Feature Request: more secure way to get image URL and deleteFile callback HOT 2
- block edit on useEffect not working HOT 3
- Custom search function for the slash menu HOT 4
- Editor Should not Flashing when Dependency Changed and There is no Content Change HOT 2
- RTL support?
- Default Shortcuts for Lists and Paragraph don't work
- Partial Block type "image" not available in insertBlocks() HOT 2
- The editor.replaceBlocks API truncates the content of the first block inserted when there are more than two replacement blocks and the content of the first block contains' http '
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blocknote.