ProseMirror 视图模块教程

ProseMirror 视图模块教程

prosemirror-viewProseMirror's view component项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-view

项目介绍

ProseMirror 是一个强大的富文本编辑器库，它被设计为模块化的，由多个独立的模块组成。prosemirror-view 模块负责在 DOM 中显示给定的编辑器状态并处理用户事件。为了使用这个模块，确保加载 style/prosemirror.css 作为样式表。

项目快速启动

安装

首先，你需要通过 npm 安装 prosemirror-view 模块：

npm install prosemirror-view

基本使用

以下是一个简单的示例，展示如何创建一个基本的 ProseMirror 编辑器视图：

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {schema} from "prosemirror-schema-basic"

// 创建一个编辑器状态
let state = EditorState.create({schema})

// 创建一个编辑器视图
let view = new EditorView(document.body, {
  state,
  // 处理编辑器更新
  dispatchTransaction(transaction) {
    let newState = view.state.apply(transaction)
    view.updateState(newState)
  }
})

应用案例和最佳实践

自定义节点视图

你可以通过自定义节点视图来扩展编辑器的功能。例如，创建一个自定义的图像节点视图：

import {Node} from "prosemirror-model"

class ImageView {
  constructor(node, view, getPos) {
    this.dom = document.createElement("img")
    this.dom.src = node.attrs.src
    this.dom.alt = node.attrs.alt
    this.dom.addEventListener("click", () => {
      let altText = prompt("Enter alt text:")
      if (altText) {
        let tr = view.state.tr.setNodeMarkup(getPos(), null, {
          ...node.attrs,
          alt: altText
        })
        view.dispatch(tr)
      }
    })
  }
}

let view = new EditorView(document.body, {
  state,
  nodeViews: {
    image: (node, view, getPos) => new ImageView(node, view, getPos)
  }
})

典型生态项目

ProseMirror 的生态系统包含多个模块，每个模块都有其特定的功能：

• prosemirror-state: 管理编辑器的状态。
• prosemirror-model: 定义文档的结构和模式。
• prosemirror-transform: 处理文档的转换和历史记录。
• prosemirror-commands: 提供常用的编辑命令。
• prosemirror-keymap: 绑定键盘快捷键。
• prosemirror-inputrules: 处理输入规则，例如自动将 *text* 转换为斜体。

这些模块共同构成了一个强大的富文本编辑器框架，适用于各种复杂的编辑需求。

prosemirror-viewProseMirror's view component项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-view