How to connect Toast UI Editor with Next.js
Froala Editor has an error that Korean alphabets are broken but its support replied as “ We do not have any known/pending issues submitted to the dev-team related to the Korean language.” Testing ‘Toast UI editor’ whether it can be applied instead.
TOAST UI Editor (TUI)
- provides Markdown mode and WYSIWYG mode.
- Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown.
- Offers Markdown mode and WYSIWYG mode, which can be switched any point in time.
In order to use TUI with Next.js, need to manually set up for SSR issue. TUI does not support SSR. Therefore, it will throw ‘Window is not defined’ or ‘Self is not defined’ error because window object only exists in client side. However, in Next.js, server side starts first and ends up throwing an error if I just use it. To prevent SSR, Next.js provides ‘dynamic import’.
console.log(editorRef.current);Why does it gives retry object?
useRefreturns a mutable ref object whose.currentproperty is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.- This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: …} object yourself is that useRef will give you the same ref object on every render.
How to fix?
useImperativeHandlecustomizes the instance value that is exposed to parent components when usingref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used withforwardRef- forwardRef creates a react component that can pass down the ref property to child of other components.
getHTML() Maximum call stack error- https://github.com/nhn/tui.editor/issues/1587
Image uploads twice error- https://github.com/nhn/tui.editor/issues/1624
- I need to start checking its version and issues from github once I cannot find an error in Google. It took more than a day to figure out why my codes are not working...🤯
Conclusion:
At the moment, I don’t think Toast UI Editor can be a substitute of Froala Editor because of the followings:
- Two issues that I mentioned earlier.
- If I copy a table from Microsoft Excel to TUI, it attaches as a picture, but if I copy a table from Google Spreadsheet, it attaches as a table but does not maintain its style, which is one of the important factor in our company’s project.
- I also need to check with Window since I only check through Mac.
Please check this post regards to TypeScript set up: https://paigekim29.medium.com/how-to-connect-toast-ui-editor-with-next-js-typescript-51ce98375f41
