How to render these plugins from raw content state in "readOnly" mode
See original GitHub issueI made the plugins work under the Editor tag, and I can type inline block like bold, underline,… etc. I also install plugins like Linkify, Mentions and Emoji, it shows correctly in the editing box.
But it just show a plain text when rendering it in HTML for the links and mentions, and some of the Emoji did not show correctly, for the one shows correctly, the CSS looks very different.
What I did is that converting editor state to raw state
let rawState = convertToRaw(this.state.editorState.getCurrentContent()
then, create a editorState for rendering as follows
const blocks = convertFromRaw(rawState);
this.state = {editorState: EditorState.createWithContent(blocks)};
and try to rendering it using Editor
with readOnly={true}
,
Defining the rendering component like
render(){
return <div className="RichEditor-root message-display-root">
<div className="RichEditor-editor message-display-editor">
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState = {this.state.editorState}
readOnly={true}
plugins={plugins}
onChange={()=>{}}
/>
</div>
</div>;
}
All the inline style show correctly (Bold, Underline, Blockquote, UL, OL, …etc), just these plugins does not show correctly when trying to render it in HTML.
When inspecting the element, some of the class and element shows quite different, like there will be draftJsMentionPlugin__mention__29BEd
class for the mention shown in editing box, but not shown in the readOnly part of the HTML page.
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (2 by maintainers)
Top GitHub Comments
it may sounds silly, but draftjs-plugin editor is using onchange to mount the decorators to editorState. so I think even your editor is on readOnly you still need to pass onchange ={ (editorState) => this.setState({editorState}}
I had to pass the decorators from my plugins to the editor when it was in readOnly mode to make sure my links and mentions rendered properly
const plugins = [mentionPlugin, linkifyPlugin, hashtagPlugin];
const decorators = flattenDeep(plugins.map((plugin) => plugin.decorators));
const decorator = new CompositeDecorator( decorators.filter((decorator, index) => index !== 1) );
and then I create my editor state like so
const content = convertFromRaw(editorContent);
const editorState = EditorState.createWithContent(content, decorator);