-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Loading HTML content into editor #41
Comments
Hi @alagos , Check similar example here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Demo/index.js#L140 |
@jpuri yes, actually, that's the specific example I'm basing of. Instead of using |
ok try to do a console log and check whats coming in |
That's the result with {
"entityMap": {},
"blocks": [
{
"key": "1n9j8",
"text": "Hello world",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}
]
} and after I click the editor to write something and {
"entityMap": {},
"blocks": [
{
"key": "a5b87",
"text": "",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}
]
} |
Its looks like editor is re-mounting in each render - which I do not expect to be the case, it may be an issue with Ideally editor should have been initialized only once but apparently its content are reset second time also. |
I ran into the same problem where my ` render() {
}` |
@ytwater: you can also check new |
@alagos: is your issue resolved, can I do something more to help it ? |
@jpuri at the end I moved to another editor as I couldn't figure out what was going on, sorry about that. Anyway thanks for the help :) |
same issue here using react-bootstrap modal |
For ones who are wondering how to initialize it with HTML content instead of empty here is the way you need to generate editorState with the content you have, to init editorState there is a function in draft-js EditorState component and I am using a converter draft-js-import-html which allows to generate contentState out of HTML content, see below
Above works for me. |
@iphonic Thanks for posting, was having problems loading the content stored in the DB back into the editor and your post solved it. |
@iphonic Thanks for your answer |
The same problem. Is there any solution? |
@iphonic's result worked for me perfectly. I am using functional components though so here is my solution: const [editorState, setEditorState] = useState(EditorState.createEmpty());
useEffect(() => {
// automatedMessage is the html string I am fetching from my server
if (automatedMessage) {
let contentState = stateFromHTML(automatedMessage.message); //automatedMessage.message being "<p>Test</p>"
setEditorState(EditorState.createWithContent(contentState));
}
}, [automatedMessage]); |
Maybe is a basic question (actually I guess is not related with your current draft based editor), but I don't get at all how draftjs works. I've been trying to load some html using the demo as example and so far I've tried something like this:
So is supposed it should display that
<p>Hello world</p>
as initial editor content passing to therawContentState
of theEditor
component, but I think I'm wrong.In any case, if I add some text to the editor, is correctly converted to HTML in the
onEditorChange
function. What I'm doing wrong here?.BTW, kudos for the great work done
The text was updated successfully, but these errors were encountered: