Npm 建立和运行ProseMirror

我想建立一个网站，将利用所见即所得，如ProseMirror。他们的文档有点清楚，构建所有东西还不是一个简单的过程，因为他们首先关注开发的其他部分。然而，它们确实提供了一个解决方案

然而，我不确定如何实际运行这个示例

我已经在我的active MAMP目录中创建了一个新文件夹，并完成了

npm安装

，以获取package.json中的所有项目。然后我运行了

npm run build

，这样项目现在被构建到默认情况下在package.json中指定的

dist

文件夹中

但是，如何使其在浏览器中运行？如果我进入浏览器，它只是显示文件和文档的列表，而不是实际的应用程序

我也试过运行

npm start

，但是package.json中没有任何链接的命令。我确实看到这是在使用rollup.js。我以前没有使用过它，也许它有一些命令？

如果转到，您将看到一些使用链接到的示例项目的代码

该项目需要更好地记录，IMHO。我不认为这是一个运行散文镜像的例子，但更多的是一个将所有不同部分连接在一起的例子

---

ProseMirror的所有部件都在NPM上，可以通过这种方式安装，即使是示例项目也是如此。从NPM安装导入，然后将代码复制到index.js或HTML文件中，屏幕上应该有一个基本编辑器。学习基本示例repo以更好地了解零件如何装配在一起。

我为一位朋友创建了此指南。希望这能帮助你和任何寻求相同答案的人。这并不完美，但能让你振作起来

ProseMirror是一个表现良好的丰富语义内容 基于contentEditable的编辑器，支持 协作编辑和自定义文档模式

问题是文档中关于如何设置 它从一无所有到一个hello world使用演示 没有例子。所有文档都假定 您已将其设置好并开始工作。 本指南旨在帮助您登上“hello world”的舞台

•首次设置汇总。请按照说明进行操作。 现在，您的计算机上应该有该项目 在浏览器中打开html文件时，可以看到“hello world”样式的屏幕

•将cd放入学习汇总项目文件夹和npm安装prosemirror模块包：

前苏联国家

prosemirror视图

前向误差模型

prosemirror模式基础

prosemirror模式列表

prosemirror示例设置

•在learn rollup index.html文件中添加以下html

指向css文件的链接

主体中id=编辑器的标记

•创建src/scripts/main.js的副本并重命名 mainbackup.js

•现在用prosemirror.net中的代码替换main.js中的所有内容

•运行\node\u module.bin\rollup-c

---

•重新加载.html以查看prosemirror是否正常工作。

没有“Hello World”示例说明如何在库中使用prosemirror库-问题中链接的基本示例仍需要“使用”，如与“Hello World”示例最接近的内容所示：-从文档中看，它可以用更简单的方式表示：

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

let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})

相反，您可以查看提供复制/粘贴编辑器并且可以合并到项目中的包装器库

---

使用ProseMirror核心库需要阅读文档-有一个概述部分：，还有一个参考部分：

以获得一个最小的编辑器，并使用rollup first install rollup运行：

npm i -g rollup

安装汇总解析插件：

npm i @rollup/plugin-node-resolve

然后将以下内容添加到

rollup.config.js

文件中：

从“@rollup/plugin node resolve”导入解析
导出默认值{
输入：“main.js”，
输出：{
文件：“build.js”，
格式：“iLife”
},
插件：[解析（）]
}

安装prosemirror基本库：

npm i进程错误模式基本进程错误状态进程错误视图

创建包含以下内容的

main.js

文件：

从'prosemirror schema basic'导入{schema}
从“prosemirror状态”导入{EditorState}
从“prosemirror视图”导入{EditorView}
let state=EditorState.create（{schema}）
window.view=neweditorview（document.querySelector（“#editor”），{state}）

构建编辑器（为了构建.js）：

rollup-c

最后，将

build.js

和prosemirror视图包中的样式（可选）包含到HTML文件中，并享受：

---

您可以检查这个在prosemirror之上构建的项目：这是使用react和prosemirror构建的非常简化的库。