返回

一款风靡 GitHub 的 Markdown 编辑器，用 Draft.js 造就实时渲染的无冕之王

前端

基于 Draft.js 打造的实时渲染 Markdown 编辑器


导语：

在 Markdown 编辑器领域，语雀一直是备受推崇的佼佼者。它以其简洁优雅的界面设计、强大的功能和实时渲染的 Markdown 语法而著称。如果你也曾被语雀的魅力折服，那么你一定和我一样，希望能够打造一款属于自己的 Markdown 编辑器。

正文：

语雀的成功绝非偶然，它在 Markdown 编辑器领域开创了先河，将实时渲染的 Markdown 语法带入大众视野。得益于 Draft.js 这个强大的 JavaScript 库，语雀实现了 Markdown 语法的实时解析和渲染，让编辑体验变得更加流畅高效。如果你也想打造一款类似于语雀的 Markdown 编辑器，那么 Draft.js 将会是你的最佳选择。

Draft.js 是一个开源的 JavaScript 库，它提供了构建富文本编辑器的基础组件。凭借其强大的功能和丰富的 API，Draft.js 已经成为许多流行的 Markdown 编辑器背后的核心引擎，包括 Medium、WordPress 和 Notion。Draft.js 的优势在于，它可以轻松地与 React 集成，使你能够快速构建出功能丰富的 Markdown 编辑器。

一、Draft.js 基础介绍：

  1. 基本概念：

    • EditorState： 表示编辑器当前的状态，包括内容、光标位置等信息。
    • Editor： 负责渲染编辑器并处理用户交互。
    • ContentState： 表示编辑器的内容，包括文本、块元素和内联样式等。
    • Decorator： 用于将编辑器中的内容转换为 HTML 或其他格式。

  2. 关键 API：

    • createEditorState： 创建一个新的 EditorState 实例。
    • getEditorState： 获取当前的 EditorState 实例。
    • setEditorState： 设置当前的 EditorState 实例。
    • onChange： 监听 EditorState 的变化。

二、构建实时渲染 Markdown 编辑器：

  1. 创建 EditorState：

    const editorState = createEditorState({
  contentState: ContentState.createFromText('')
});

  2. 创建 Editor：

    const editor = createEditor(editorState);

  3. 渲染 Editor：

    ReactDOM.render(
  <Editor editorState={editorState} onChange={this.onChange} />,
  document.getElementById('root')
);

  4. 监听 EditorState 的变化：

    onChange(editorState) {
  this.setState({ editorState });
}

三、添加 Markdown 语法解析和渲染：

  1. 安装依赖：

    npm install draft-js-markdown-plugin

  2. 创建 Markdown 解析器：

    const markdownPlugin = createMarkdownPlugin();

  3. 将 Markdown 解析器添加到 Editor：

    const editor = createEditor(editorState, markdownPlugin);

现在，你的 Markdown 编辑器就可以实时渲染 Markdown 语法了。你可以通过在编辑器中输入 Markdown 语法来验证它的效果。

结语：

基于 Draft.js 构建 Markdown 编辑器是一个相对复杂的过程，但如果你遵循本文的步骤，你就可以轻松实现。希望本文能够帮助你打造出属于自己的 Markdown 编辑器，让你的写作体验更加流畅高效。

扩展阅读：