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