ProseMirror Markdown 集成教程

78 0 0

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 编辑模式。