ProseMirror 视图模块使用教程

ProseMirror 视图模块使用教程

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

项目目录结构及介绍

ProseMirror 是一个模块化的富文本编辑器库，其视图模块（prosemirror-view）负责在 DOM 中显示给定的编辑器状态并处理用户事件。以下是 prosemirror-view 模块的主要目录结构及介绍：

prosemirror-view/
├── src/
│   ├── index.js
│   ├── input.js
│   ├── domchange.js
│   ├── selection.js
│   ├── viewdesc.js
│   ├── clipboard.js
│   ├── keymap.js
│   ├── props.js
│   ├── decoration.js
│   ├── nodeview.js
│   ├── update.js
│   ├── scroll.js
│   ├── dropcursor.js
│   ├── gapcursor.js
│   ├── main.js
│   └── style.js
├── test/
│   ├── index.js
│   ├── input.js
│   ├── domchange.js
│   ├── selection.js
│   ├── viewdesc.js
│   ├── clipboard.js
│   ├── keymap.js
│   ├── props.js
│   ├── decoration.js
│   ├── nodeview.js
│   ├── update.js
│   ├── scroll.js
│   ├── dropcursor.js
│   ├── gapcursor.js
│   └── main.js
├── package.json
├── README.md
└── style/
    └── prosemirror.css

• src/：包含视图模块的核心源代码文件。
  • index.js：模块的入口文件。
  • input.js：处理输入事件。
  • domchange.js：处理 DOM 变化。
  • selection.js：处理选择事件。
  • viewdesc.js：处理视图描述。
  • clipboard.js：处理剪贴板事件。
  • keymap.js：处理键盘映射。
  • props.js：处理属性。
  • decoration.js：处理装饰。
  • nodeview.js：处理节点视图。
  • update.js：处理更新。
  • scroll.js：处理滚动。
  • dropcursor.js：处理拖放光标。
  • gapcursor.js：处理间隙光标。
  • main.js：主文件。
  • style.js：样式文件。
• test/：包含测试文件。
• package.json：项目的配置文件。
• README.md：项目的说明文档。
• style/：包含样式文件。

项目启动文件介绍

项目的启动文件是 src/index.js，它是视图模块的入口文件。该文件导入了模块所需的其他文件，并定义了主要的类和函数。

// src/index.js
import {EditorView} from "./main"
import {Decoration, DecorationSet} from "./decoration"
import {NodeView} from "./nodeview"
import {DirectEditorProps} from "./props"
import {posAtCoords, coordsAtPos, scrollIntoView} from "./scroll"
import {drawSelection, selectionToDOM} from "./selection"
import {dispatchKey, keydownHandler, keymap} from "./keymap"
import {captureEvents, stopEvent} from "./input"
import {updateState, someProp, hasFocus, focus} from "./update"
import {dropCursor} from "./dropcursor"
import {gapCursor} from "./gapcursor"
import {baseKeymap} from "./commands"
import {inputRules, inputHandler} from "./inputrules"
import {clipboardTextSerializer, cutCopy, pasteHandler} from "./clipboard"
import {Plugin, PluginKey} from "prosemirror-state"
import {Fragment, Node, Slice} from "prosemirror-model"
import {Step, Transform} from "prosemirror-transform"
import {Schema, DOMParser} from "prosemirror-model"
import {MarkedRange} from "./mark"
import {EditorState} from "prosemirror-state"
import {Transaction} from "prosemirror-state"
import {Selection} from "prosemirror-state"
import {TextSelection} from "prosemirror-state"
import {NodeSelection} from

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