Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Document Editor using Froala
const EditorComponent = forwardRef(({ defaultContent }, ref) => {
// State
const [state, setState] = useReducer(
(prevState, nextState) => ({
...prevState,
...nextState
}),
{
content: defaultContent || ""
}
);
const editor = useRef({});
const initializeEditor = (e, editorRef) => {
editor.current = editorRef;
window.editor = editorRef;
};
useImperativeHandle(ref, () => ({
getContent
}));
const getContent = () => {
return editor.current.html.get();
};
const editorConfig = {
placeholder: "Edit Me",
documentReady: true,
events: {
"froalaEditor.initialized": initializeEditor
}
};
const onContentChange = model => {
this.setState({
content: model
});
};
return (
<div className="main-editor-container">
<FroalaEditor
config={editorConfig}
tag="textarea"
model={state.content}
onModelChange={onContentChange}
/>
</div>
);
});
@5tormTrooper

This comment has been minimized.

Copy link

5tormTrooper commented Jan 25, 2020

Useful snippet! One correction: this.setState on line 37 should just be setState.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.