ProseMirror Markdown 集成教程

ProseMirror Markdown 集成教程

prosemirror-markdownProseMirror Markdown integration项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-markdown

项目介绍

ProseMirror 是一个基于 contentEditable 的富文本编辑器，支持协同编辑和自定义文档模式。prosemirror-markdown 模块是 ProseMirror 的一个非核心模块，它实现了与 CommonMark 文档模式相对应的 ProseMirror 模式，并提供了一个解析器和序列化器，用于将普通文档和 Markdown 文档相互转换。

项目快速启动

安装

首先，你需要安装 prosemirror-markdown 模块及其依赖：

npm install prosemirror-markdown prosemirror-model prosemirror-state prosemirror-view prosemirror-example-setup

基本使用

以下是一个简单的示例，展示如何使用 prosemirror-markdown 模块创建一个支持 Markdown 的编辑器：

import {EditorView} from "prosemirror-view"
import {EditorState} from "prosemirror-state"
import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
import {exampleSetup} from "prosemirror-example-setup"

class ProseMirrorView {
  constructor(target, content) {
    this.view = new EditorView(target, {
      state: EditorState.create({
        doc: defaultMarkdownParser.parse(content),
        plugins: exampleSetup({schema})
      })
    })
  }

  get content() {
    return defaultMarkdownSerializer.serialize(this.view.state.doc)
  }

  focus() {
    this.view.focus()
  }

  destroy() {
    this.view.destroy()
  }
}

// 创建一个编辑器实例
let place = document.querySelector("#editor")
let content = document.querySelector("#content").value
let view = new ProseMirrorView(place, content)

应用案例和最佳实践

案例：评论系统

假设你有一个允许用户输入评论的网站，并且你决定让用户在评论输入时使用 Markdown。你的大部分用户都知道如何使用 Markdown，并且觉得它很方便。但是你可能还要面对一些非技术的用户，他们对学习 Markdown 的晦涩难懂的语法规则并不感冒。使用 ProseMirror，你可以在不修改后端服务的任何东西的情况下，将 ProseMirror 作为你的编辑器。人们在编辑的时候可以随时切换到正常编辑模式和 Markdown 编辑模式。

最佳实践

1. 用户选择：给用户提供选择，让他们自己选择一个熟悉的书写方式。
2. 无缝切换：允许用户在编辑时无缝切换到 Markdown 编辑模式和正常编辑模式。
3. 简化学习曲线：通过提供可视化的编辑工具栏，简化 Markdown 的学习曲线。

典型生态项目

ProseMirror 核心模块

• prosemirror-model: 定义了 ProseMirror 的文档模型。
• prosemirror-state: 提供了编辑器状态的管理。
• prosemirror-view: 提供了编辑器的视图组件。
• prosemirror-example-setup: 提供了一些示例设置，帮助快速启动编辑器。

其他相关模块

• prosemirror-commands: 提供了一些常用的编辑命令。
• prosemirror-inputrules: 提供了输入规则，用于自动格式化文本。
• prosemirror-keymap: 提供了键盘映射，用于绑定快捷键。

通过这些模块的组合使用，你可以构建一个功能强大且灵活的 Markdown 编辑器。

prosemirror-markdownProseMirror Markdown integration项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-markdown