Comments (4)
Bumping as I have the same question
from craft.js.
If you have JSON(string), you can use deserialize method in Editor-actions in place you want to load.
This is very simple example.
try:
- click Save button(probably equivalent to the serialized json you have)
- click Load button
import { Editor, Frame, useEditor } from "@craftjs/core"
import { FC, useState } from "react"
const TextNode = () => {
return <div style={{ color: "purple" }}>hello</div>
}
const EditorForSaving: FC<{ setJSONData: (json: string) => void }> = ({
setJSONData,
}) => {
const { query } = useEditor()
return (
<div style={{ marginBottom: 24, backgroundColor: "#fafafa" }}>
<h2>Editor for Saving</h2>
<div>
<button
onClick={() => {
setJSONData(query.serialize())
}}
>
Save
</button>
</div>
<Frame>
<TextNode />
</Frame>
</div>
)
}
const EditorForLoading: FC<{ jsonData: string }> = ({ jsonData }) => {
const {
actions: { deserialize },
} = useEditor()
return (
<div style={{ backgroundColor: "#fff" }}>
<h2>Editor for Loading</h2>
<div>
<button
onClick={() => {
if (jsonData) {
deserialize(jsonData)
}
}}
>
Load
</button>
</div>
<Frame>
{
// loaded in heare
}
</Frame>
</div>
)
}
export default function Demo() {
const [jsonData, setJSONData] = useState("")
return (
<div>
<h1>Save and Load example</h1>
<Editor resolver={{ TextNode }}>
<EditorForSaving setJSONData={setJSONData} />
</Editor>
<Editor resolver={{ TextNode }}>
<EditorForLoading jsonData={jsonData} />
</Editor>
</div>
)
}
from craft.js.
If you have JSON(string), you can use deserialize method in Editor-actions in place you want to load. This is very simple example. try:
- click Save button(probably equivalent to the serialized json you have)
- click Load button
import { Editor, Frame, useEditor } from "@craftjs/core" import { FC, useState } from "react" const TextNode = () => { return <div style={{ color: "purple" }}>hello</div> } const EditorForSaving: FC<{ setJSONData: (json: string) => void }> = ({ setJSONData, }) => { const { query } = useEditor() return ( <div style={{ marginBottom: 24, backgroundColor: "#fafafa" }}> <h2>Editor for Saving</h2> <div> <button onClick={() => { setJSONData(query.serialize()) }} > Save </button> </div> <Frame> <TextNode /> </Frame> </div> ) } const EditorForLoading: FC<{ jsonData: string }> = ({ jsonData }) => { const { actions: { deserialize }, } = useEditor() return ( <div style={{ backgroundColor: "#fff" }}> <h2>Editor for Loading</h2> <div> <button onClick={() => { if (jsonData) { deserialize(jsonData) } }} > Load </button> </div> <Frame> { // loaded in heare } </Frame> </div> ) } export default function Demo() { const [jsonData, setJSONData] = useState("") return ( <div> <h1>Save and Load example</h1> <Editor resolver={{ TextNode }}> <EditorForSaving setJSONData={setJSONData} /> </Editor> <Editor resolver={{ TextNode }}> <EditorForLoading jsonData={jsonData} /> </Editor> </div> ) }
@shota-f I can load the JSON on click. There is no problem with that. What I want is, when I save the template as JSON I am showing those JSON as my template in the sidebar. Now I want to drag it from the sidebar to the editor? How do I do that? Every drag element must be in the Editor Resolver. How do i handle that is case of Serialized JSON?
from craft.js.
Bumping as I have the same question
@jorgegonzalez check out this issue. #316
from craft.js.
Related Issues (20)
- https://dynamics.sorce.interno/datagrid/forms_dynamic
- Multiple frames inside of an editor HOT 2
- User Component name doesn't change when specified in config HOT 1
- Nested elements are created as Linked Nodes instead of child nodes HOT 1
- The rollup packaging of the Craft.js project was successful, but when used, it reported an error "Buffer is not defined."
- Cancel drop HOT 2
- How do i get my html markup HOT 2
- Craft.js with React version 17 or 18 HOT 2
- Customizeable drag and drop HOT 1
- Rollup cache is published to NPM HOT 1
- Avoid animation of the element snapping back to its origin position when element is dropped. HOT 1
- Something like maxlength or max content restrictions
- Rendering a Navbar with dynamic menu items (e.g. Home, Blog) HOT 1
- Question: can I load html into the editor instead of manually build? HOT 1
- Drag and drop does not work in the tutorial HOT 4
- addNodeTree error
- Allow Import of Element/Components from outside project
- isDeletable is inadequate - or just plain wrong.
- Selected node is reset when i interact with editor on production HOT 1
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 craft.js.