构建和运行 ProseMirror

Question

我想建立一个使用所见即所得的网站，例如 ProseMirror。他们的文档有点清楚，因为他们首先专注于开发的其他部分，因此构建所有内容并不是一个简单的过程。但是，它们确实提供了一个可以克隆和运行的项目。

但是，我不确定如何实际运行此示例。

我在我的活动 MAMP 目录中创建了一个新文件夹，并完成npm install了获取 package.json 中的所有项目。然后我已经运行，npm run build以便项目现在内置到distpackage.json 中默认指定的文件夹中。

但是，我如何真正让它在浏览器中运行？如果我转到浏览器，它只是显示我的文件和文档列表，而不是实际的应用程序。

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

Answer 1

我为朋友创建了本指南。希望这可以帮助您和任何寻找相同答案的人。它并不完美，但可以让您启动并运行。

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

问题是关于如何使用演示示例将其从无设置到 hello world 的文档不存在。所有文档都假定您已设置并运行它。本指南旨在帮助您进入“hello world”阶段

• 第一次设置汇总。按照此处的说明进行操作。你现在应该有你的电脑从该项目此，当你在浏览器中打开HTML文件看到“Hello World”的画面风格。

• cd 进入 learn-rollup 项目文件夹和 npm install prosemirror 模块包：

1. prosemirror 状态。
2. prosemirror 视图。
3. prosemirror 模型
4. prosemirror-schema-basic
5. prosemirror-schema-list
6. prosemirror-example-setup

• 在learn-rollup index.html 文件中添加以下html html 代码以添加到learn-rollup index.html

1. css文件的链接
2. 正文中具有 id=editor 的标签

学习汇总文件夹结构

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

• 现在用prosemirror.net第一个示例中的代码替换main.js 中的所有内容。

• 运行\node_module.bin\rollup -c

• 重新加载 .html 以查看 prosemirror 工作。