简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器

小君 2023-01-30 12:46:12 424

简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器import {EditorState} from "prosemirror-state" import {EditorView} from "prosemirror-view" import {schema DOMParser} from "prosemirror-model" import {schema} from "prosemirror-schema-basic" import {addListNodes} from "prosemirror-schema-list" import {exampleSetup} from "prosemirror-example-setup" // Mix the nodes from prosemirror-schema-list into the basic schema to // create a schema with list su

介绍

prosemirror是一个用于在Web端构建富文本编辑器的工具包理想的内容编辑器可以生成结构化，语义上有意义的文档，但这样做的方式很容易让用户理解。ProseMirror试图弥合Markdown文本编辑和经典WYSIWYG（所见即所得）编辑器之间的差距。它通过实现WYSIWYG风格的编辑界面来实现这一点，该界面比纯HTML更受约束和结构化。你可以自定义编辑器创建的文档的形状和结构，并根据应用程序的需要进行定制。所以还是值得尝试下的！

简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器(1)

Github

https://github.com/prosemirror

相关特性

协同编辑

ProseMirror具有内置的，可靠的支持，用于协作编辑，其中多个人实时处理同一文档。

可扩展的模式文档模式

允许使用自定义结构编辑文档，而无需从头开始编写自己的编辑器。

模块化

模块化架构确保您只加载所需的代码，并可根据需要替换系统的各个部分。

可插拔插件系统

允许您轻松启用其他功能，并以方便的格式打包您自己的扩展。

功能实用

强大且不可变的体系结构使ProseMirror可以轻松集成到现代Web应用程序中，并可以自信地实现复杂的行为。

Unopinionated

核心库很小且通用，提供了可以构建非常不同类型的编辑器的基础。

实例Demo

基本示例

import {EditorState} from "prosemirror-state" import {EditorView} from "prosemirror-view" import {schema DOMParser} from "prosemirror-model" import {schema} from "prosemirror-schema-basic" import {addListNodes} from "prosemirror-schema-list" import {exampleSetup} from "prosemirror-example-setup" // Mix the nodes from prosemirror-schema-list into the basic schema to // create a schema with list support. const mySchema = new Schema({ nodes: addListNodes(schema.spec.nodes "paragraph block*" "block") marks: schema.spec.marks }) window.view = new EditorView(document.querySelector("#editor") { state: EditorState.create({ doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")) plugins: exampleSetup({schema: mySchema}) }) })

简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器(2)

图片上传

用户的本地文件系统插入图像时，在上传图像并为其创建URL之前，将无法访问实际图像。但是，你不希望让用户首先完成上传图像的动作，然后等待其完成，然后才将图像插入到文档中。理想情况下，选择图像后，可以开始上传，但也会立即在文档中插入占位符。然后，当上载完成时，该占位符将替换为最终图像。

简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器(3)

自定义菜单

prosemirror允许自定义菜单，这样更加可控，灵活性更强

简单的浏览器框架：开源的语义丰富的浏览器端文本编辑器(4)

class MenuView { constructor(items editorView) { this.items = items this.editorView = editorView this.dom = document.createElement("div") this.dom.className = "menubar" items.forEach(({dom}) => this.dom.appendChild(dom)) this.update() this.dom.addEventListener("mousedown" e => { e.preventDefault() editorView.focus() items.forEach(({command dom}) => { if (dom.contains(e.target)) command(editorView.state editorView.dispatch editorView) }) }) } update() { this.items.forEach(({command dom}) => { let active = command(this.editorView.state null this.editorView) dom.style.display = active ? "" : "none" }) } destroy() { this.dom.remove() } }