Getting Started
Adding Wysimark, the WYSIWYG Markdown Editor, to your React project. Estimated time: 10 minutes
Installation
Add the Wysimark NPM package to your Node project.
If you're using npm:
If you're using yarn:
If this is a new project, make sure React is installed.
For npm:
For yarn:
Once you've installed Wysimark, import it.
Starting with an empty React App that returns nothing.
Add the Wysimark editor to it:
To make the editor useful, you need a way to get and set the markdown in the editor.
Set the initial markdown by providing an argument to the useEditor
hook.
You can now get existing content into the editor.
To get the markdown out of the editor, call the getMarkdown
method from the editor
object. In this example, we add a Submit
button that logs markdown to the console.
In a real app, this is where you save the markdown text to the database.
Congratulations, you can now add a WYSIWYG Markdown Editor to any React app. Your editor supports GitHub Flavored Markdown extensions such as tables and task lists and has built-in hosted image and file uploads.
Last updated
Was this helpful?