React-draft-wysiwyg: Issue related to display the content of the editor.
Hi,
Is there any attribute to hold the value(text) of the editor,if yes please suggest.Kindly help.
Thanks
Srisuk
All 16 comments
Hey @Srisuk , I do not get your question.
jpuri
on 30 Jan 2017
Hi,
I want to display the content in the text editor after saving the content in database and display the same content while reopening the editor.
Now we have only "Placeholder" as an attribute to display the content when we open the text editor for the first time.
So,In the same way do we have any attribute to display the fetched content from database??
Kindly help.
Thanks
Srisuk
on 30 Jan 2017
@Srisuk: yes that of course works, check Controlled / Un-Controlled editor component section in docs (https://jpuri.github.io/react-draft-wysiwyg/#/docs).
jpuri
on 30 Jan 2017
Hi Jyoti,
My concern is related to display the content. I will elaborate my doubt.
I am creating a page in which when i click on a button Editor will open and i am writing some content inside an editor and then storing in database.
I am able to store the content in database but when i am opening again the editor to "edit it" i need some attribute to display the content from database.
I am using placeholder to display the content but placeholder is used only when the editor is empty so that is not a good way of doing.
So is there any other attribute like placeholder to display the content of an editor.Kindly help.
Thanks
Srisuk
on 30 Jan 2017
editorState, contentState, defaultEditorState are the attributes. You can refer to example here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/playground/index.js#L105.
jpuri
on 30 Jan 2017
editorState, contentState, defaultEditorState to store the content of the editor and send back to database n all purpose but these attributes are not used for displaying content.Like we have "value" attribute in tag to display the content but we don't have "value" attribute in Editor.So is there any attribute to display the content.
Srisuk
on 30 Jan 2017
to get your content for storing it in the DB
convertToRaw(this.state.editorState.getCurrentContent())
And to load your saved editorState you just assign it to the editorState:
editorState: EditorState.createWithContent(convertFromRaw(rawEditorStateFromDataBase))
nyrosmith
on 30 Jan 2017
Hi ,
Thanks for the help,now its working.
But once i am getting the content inside my editor i am unable to type anything as getting error its immutable.
Can u pls tell me how to remove the immutable from the editor and make it mutable.
Thanks
Srisuk
on 30 Jan 2017
Can you provide a fiddle so I can check what's going on in your code?
nyrosmith
on 30 Jan 2017
Hi,
I am getting this error:-
contentState.getBlockMap is not a function at convertFromDraftStateToRaw
Kindly find the code below and help to resolve the issue:-
getInitialState: function () {
let editorState;
let inputText="
Editor Content for text
"; if(inputText){
const blocksFromHTML = convertFromHTML(inputText);
const contentState = ContentState.createFromBlockArray(blocksFromHTML);
editorState = EditorState.createWithContent(contentState);
return { editorContents:editorState}
}
else
return { editorContents: [] }
},
onEditorStateChange={this.onEditorStateChange.bind(this)}
rawContentState={this.state.inputText}
/>
Srisuk
on 30 Jan 2017
Can you provide a link to the repo or create a small sample on codepen or a similar system?
To be honest I have no clue what this code should be doing....
@jpuri do you know of an existing fiddle that could be used as a starting point? If not, maybe creating one would be a good idea. Especially for this type of questions
nyrosmith
on 31 Jan 2017
@Srisuk convertFromHTML supports only a subset of html, the error you mentioned above seems to be coming from there. I would suggest you to save editor state as JSON and not as HTML.
Agreed @nyrosmith: its good idea to have a fiddle. I will try to create one as I get time. In the meantime @Srisuk you can check this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/playground/index.js
jpuri
on 31 Jan 2017
@jpury Is it ok if I try to get a fiddle up and running? It might take some time but I think this is a good opportunity for contributing back to this excellent project.
nyrosmith
on 31 Jan 2017
Contributions are welcome, thanks a lot @nyrosmith 馃憤
jpuri
on 31 Jan 2017
Hi all,
Thanks for the help...my code is running now.
Thank u so much..:)
Srisuk
on 1 Feb 2017
Hi,
Closing this issue thanks @Srisuk, @nyrosmith .
jpuri
on 5 Feb 2017
Related issues
Pixelatex
路
3Comments
dahudson88
路
3Comments
rajasekar-ideas2it
路
4Comments
kcabading
路
3Comments
june50232
路
4Comments
Most helpful comment
to get your content for storing it in the DB
convertToRaw(this.state.editorState.getCurrentContent())And to load your saved editorState you just assign it to the editorState:
editorState: EditorState.createWithContent(convertFromRaw(rawEditorStateFromDataBase))