建筑和运行 ProseMirror

Question

我想建立一个使用所见即所得的网站，例如 ProseMirror。他们的文档有点清楚，构建所有内容并不是一个简单的过程，因为他们首先关注开发的其他部分。但是，他们确实提供了 project that you can clone and run.

不过我不确定如何运行这个例子。

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

默认指定的 dist 文件夹中

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

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

Answer 1

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

恕我直言，该项目需要更好地记录。我不认为它应该是运行散文镜像的一个例子，而更像是一个将所有不同部分连接在一起的例子。

ProseMirror 的所有部分都在 NPM 上，可以通过这种方式安装，甚至是示例项目。从 NPM 安装导入，然后将该代码复制到 index.js 或 HTML 文件中，屏幕上应该有一个基本的编辑器。研究基本示例 repo 以更好地理解各部分如何组合在一起。

Answer 2

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

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

问题是关于如何设置的文档使用演示从无到有例子是不存在的。所有文档都假定你有它设置和工作。本指南旨在帮助您进入 "hello world" 阶段

• 第一个设置汇总。按照 here 的说明进行操作。您现在应该在计算机上拥有该项目来自 this，当您在浏览器中打开 html 文件时，会看到 "hello world" 样式屏幕。

• cd 进入 learn-rollup 项目文件夹并 npm 安装 prosemirror 模块包：

prosemirror 状态。
prosemirror-view.
prosemirror-模型
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-示例设置

• 在 learn-rollup index.html 文件中添加以下内容 html html code to add to learn-rollup index.html

link到css文件
body 中 id=editor 的标签

learn-rollup folder structure

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

• 现在用 prosemirror.net first example.

中的代码替换 main.js 中的所有内容

• 运行 \node_module.bin\rollup -c

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

Answer 3

没有 'Hello World' 示例说明如何使用 prosemirror 库本身 - 问题中链接的基本示例仍然需要 'used'，如中所示最接近 'Hello World' 示例的事物：https://prosemirror.net/examples/basic/ - 从文档中可以看出它可以用更简单的方式表示：

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})

相反，您可以查看提供 copy/paste 编辑器并且可以合并到您的项目中的包装器库。

使用 ProseMirror 核心库需要您阅读文档 - 有一个概述部分：http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro

Answer 4

要启动最小编辑器并运行 rollup 首先安装 rollup：

npm i -g rollup

安装汇总解析插件：

npm i @rollup/plugin-node-resolve

然后将以下内容添加到 rollup.config.js 文件中：

import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'main.js',
  output: {
    file: 'build.js',
    format: 'iife'
  },
  plugins: [resolve()]
}

安装prosemirror基础库：

npm i prosemirror-schema-basic prosemirror-state prosemirror-view

使用以下内容创建 main.js 文件：

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

let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})

构建您的编辑器（到 build.js）：

rollup -c

最后将 build.js 和可选的 prosemirror-view 包中的样式包含到您的 HTML 文件中并享受：

<html>
  <body>
    <div id="editor"></div>
    <script src="build.js"></script>
  </body>
</html>

Answer 5

我用了@Rob 的方法，几乎成功了。只有一件事，在完成所有步骤后，我运行出现错误（见下文）。

代码来自官方第一个例子。

不知道为什么会这样，我必须在 <div id="editor"></div> 之后手动添加一个 <div id="content"></div> 才能开始。

但是 <div id="content"></div> 不应该自动添加吗？ @Rob 或者 The official first example didn't mention you have to add this div,不知道哪里出了问题。

建筑和运行 ProseMirror

Building and Running ProseMirror

npm

prose-mirror

建筑和 运行 ProseMirror

Building and Running ProseMirror

npm

prose-mirror

建筑和运行 ProseMirror