This repository is undergoing a huge refactoring and react-mde will now be headless, starting from version 12. Meaning, it won't be opinionated about styles anymore. The master
branch now contains the new version. No updates to the 11.5.0 will ever come.
You can check out the headless version (12.*) with the next
tag. Here is a demo.
I will close all issues related to the 11.* version since that's no longer being maintained.
A simple yet powerful and extensible React Markdown Editor that aims to have feature parity with the Github Markdown editor. React-mde has no 3rd party dependencies.
npm i react-mde
React-mde is a completely controlled component.
Minimal example using Showdown. View live on CodeSandBox:
import * as React from "react";
import ReactMde from "react-mde";
import * as Showdown from "showdown";
import "react-mde/lib/styles/css/react-mde-all.css";
const converter = new Showdown.Converter({
tables: true,
simplifiedAutoLink: true,
strikethrough: true,
tasklists: true
});
export default function App() {
const [value, setValue] = React.useState("**Hello world!!!**");
const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
return (
<div className="container">
<ReactMde
value={value}
onChange={setValue}
selectedTab={selectedTab}
onTabChange={setSelectedTab}
generateMarkdownPreview={markdown =>
Promise.resolve(converter.makeHtml(markdown))
}
/>
</div>
);
}
React-mde is agnostic regarding how to preview Markdown. The prop generateMarkdownPreview
should return a Promise of either a string or a ReactElement
.
React-mde comes with SVG icons extracted from FontAwesome.
You can customize the way icons are resolved by passing your own getIcon
that will return a ReactNode
given a command name.
<ReactMde
getIcon={(commandName) => <MyCustomIcon name={commandName} />}
onChange={this.handleValueChange}
// ...
/>
The types are described below
onChange
event.[["code", "bold"], ["italic"]]
. The default list can be obtained with import { getDefaultToolbarCommands } from 'react-mde', getDefaultToolbarCommands()
prop
is falsy, then no preview is going to be generated.iconProvider
to allow custom icon rendering.
options. It is recommended to inspect the layouts source code to see what options can be passed to each
while the documentation is not complete.write
, preview
, uploadingImage
and pasteDropSelect
.px
.text
and triggeredBy
(character that triggered the suggestions). The result should be an array of {preview: React.ReactNode, value: string}
.
The preview
is what is going to be displayed in the suggestions box. The value
is what is going to be inserted in the textarea
on click or enter.loadSuggestions
.writeButton
, previewButton
, commandButtons
and textArea
.The following styles from React-mde should be added: (Both .scss and .css files are available. No need to use sass-loader if you don't want)
Easiest way: import react-mde-all.css
:
import 'react-mde/lib/styles/css/react-mde-all.css';
If you want to have a more granular control over the styles, you can import each individual file.
If you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss
React-mde does not automatically sanitize the HTML preview. If your using Showdown, this has been taken from their documentation:
Cross-side scripting is a well known technique to gain access to private information of the users of a website. The attacker injects spurious HTML content (a script) on the web page which will read the user’s cookies and do something bad with it (like steal credentials). As a countermeasure, you should filter any suspicious content coming from user input. Showdown doesn’t include an XSS filter, so you must provide your own. But be careful in how you do it…
You might want to take a look at showdown-xss-filter.
It is also possible to return a Promise to a React Element from generateMarkdownPreview
, which makes
it possible to use ReactMarkdown as a preview. View issue.
ReactMarkdown has built-in XSS protection.
Please refer to the commands source code to understand how they should be implemented.
React-mde is MIT licensed.
In order to make React-mde zero deps, I've embedded two small libraries:
Made with by André Pena and other awesome contributors.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。