react markdown
使用 slate-js 构建
用法
安装 npm 包：
npm install -E @opuscapita/react-markdown
将其导入到您的应用程序中
import MarkdownInput from '@opuscapita/react-markdown
有关更多详细信息，请参阅交互式示例：https://opuscapita.github.io/react-markdown
由 React Showroom 提供支持的演示
如果想和Bootstrap Modal一起使用，需要添加样式：
.markdown-input_fullscreen { // pass this class to Modal component
overflow: hidden;
}
.markdown-input_fullscreen.modal.in .modal-dialog {
transform: none;
}
它是如何运作的
MarkdownEditor 支持以下装饰器：
-
bold -
italic -
strikethrough -
heading-1 -
heading-2 -
heading-3 -
heading-4 -
heading-5 -
heading-6 -
list -
ordered-list
按钮（它们的组、顺序）
[B、I、S] [A] [H1、H2、H3、H4、H5、H6]、[UL、OL]
- 内联文本操作
- [B] - 粗体标记
- [I] - 斜体标记
- [S] - 删除线标记
- 关联
- 文本块操作
- [H1] - 标头 1 块
- [H2] - 标头 2 块
- [H3] - 标头 3 块
- [H4] - 标头 4 块
- [H5] - 标头 5 块
- [H6] - 标头 6 块
- 列表
多行选择注意：只有list和ordered list可用于多行选择，工具栏中的其他按钮被禁用，因为否则 Markdown 突出显示会变得不一致。
行为
块元素
列表 [UL] 按钮
这是该按钮的视频示例规范
- 如果行不以 ['{number} 开头，则在行的开头插入标记“*”。 ', '#', '##', '###', '####', '######', '######']
- 如果行以 ['{number} 开头，则替换为标记“*”。 ', '#', '##', '###', '####', '######', '######']
- 如果在
enter （如果项目包含任何文本），则在下一行的开头插入标记“*” - 如果用户在标记为列表项但不包含任何文本的行末尾按
enter则清除“*”中的行并将光标置于新行
排序列表 [OL] 按钮
这是该按钮的视频示例规范
- 插入标记'1。 ' 如果不是以 ['* ', '# ', '## ', '### ', '#### ', '##### ', '## 开头，则在行的开头####']
- 替换为标记“1”。 ' 如果行以 ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### '] 开头
- 如果在标记为列表项的行末尾按下
enter （如果项目包含任何文本），则在下一行的开头插入标记“{number+1}” - 如果用户在标记为有序列表项但不包含任何文本的行末尾按
enter ，则清除“{number}”中的行并将光标置于新行
标题项目 [h1-h6] 按钮
这是 [H2] 按钮的视频示例规范（其他标题按钮也相应工作）
- 如果不是以 ['* ', '{number} 开头，则在行开头插入标记 '# ' - '###### '（取决于按钮）。 ']
- 如果行的星号为 ['* ', '{number}，则替换为标记 '# ' - '###### '（取决于按钮）。 ']
- 如果单击相应的标题按钮，则删除现有的标题标记
- 如果当前标题标记与按下的标题按钮不对应，则将现有标题标记更新为另一个标题标记
标记元素
以下是这些按钮的视频示例规范
粗体 [B] 按钮
- 选定的文本用“**”括起来，例如 {selected_text} -> **{selected_text}**
- 如果所选文本包含粗体文本，则将其展开，例如 **{selected_text}** -> {selected_text}
- 如果未选择文本，则将“**{cursor}**”插入光标位置，并且光标放置在其中
斜体 [I] 按钮
- 选定的文本用“_”括起来，例如 {selected_text} -> _{selected_text}_
- 如果所选文本标记为斜体，则将其展开，例如 _{selected_text}_ -> {selected_text}
- 如果未选择文本，则将“_{cursor}_”插入光标位置，并且光标放置在其中
删除线 [S] 按钮
- 选定的文本用“~~”括起来，例如 {selected_text} -> ~~{selected_text}~~
- 如果所选文本标记为删除线，则将其展开，例如 ~~{selected_text}~~ -> {selected_text}
- 如果未选择文本，则将“~~{cursor}~~”插入光标位置，并将光标放置在其中
行内元素
外部锚点 [A] 按钮
这是该按钮的视频示例规范
- 用“[”和“](http://example.com)”包裹选定的文本，例如 {selected_text} -> [{selected_text}](http://example.com)
- 如果未选择文本，则将文本 [链接文本](http://example.com) 插入光标位置。
已知问题
- 在多行选择工具栏的情况下，除
list和ordered list之外的所有按钮均不可用（不支持任何操作） - 不支持代码块
贡献者
| 阿列克谢·谢尔盖夫 |
|---|
| 德米特里·迪文 |
| 德米特里·桑科 |
| 亚历山大·巴尤诺夫 |
| 基里尔·沃尔科维奇 |
执照
根据 Apache 许可证 2.0 版获得许可。请参阅许可证以获取完整的许可证文本。
