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.
The current version of Wysimark supports React. Future versions will support Angular, Vue and plain JavaScript.
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.
Important: Image and file uploads are temporary until you set up an upload folder. Before going to production, sign up for a free account and get 1GB of image and file upload space. Alternatively, if you don't need image uploads, you can disable them.
Last updated