构建和运行ProseMirror

Question

构建和运行ProseMirror

npmprose-mirror

4

我想要建立一个网站，使用ProseMirror这样的所见即所得编辑器。他们的文档有点清晰表明构建一切并不是那么容易，因为他们先专注于开发的其他部分。但是，他们确实提供了一个项目可供克隆和运行。

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

我已经在我的当前MAMP目录中创建了一个新文件夹，并使用npm install获取了package.json中的所有项。然后我运行了npm run build，使项目现在构建到package.json中默认指定的dist文件夹中。

但是，我该如何在浏览器中运行它呢？如果我去浏览器，它只是显示了一个文件和文档列表，而不是真正的应用程序。

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

- Ridge Robinson

您可以查看基于ProseMirror构建的此项目：http://www.nibedit.com。这是一个使用React和ProseMirror构建的非常简化的库。 - Jyoti Puri

6个回答

2

没有一个“Hello World”的例子来展示如何使用prosemirror库本身 - 该问题链接的基本示例仍然需要被“使用”，就像最接近“Hello World”示例的东西一样：https://prosemirror.net/examples/basic/ - 从文档中看起来可以用更简单的方式表示：

“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核心库需要阅读文档 - 这里有一个概述部分：http://prosemirror.net/docs/guide/#intro，以及一个参考部分：http://prosemirror.net/docs/ref/#top.intro。最初的回答已经给出了，现在您可以考虑使用可嵌入项目的包装库。

- Zach Smith

1

如果您访问基本示例，您将看到一些使用您链接的示例项目的代码。

在我看来，那个项目需要更好的文档说明。我认为它不应该是运行ProseMirror的示例，而是将所有不同部分连接在一起的示例。

ProseMirror的所有部分都在NPM上，并且可以通过这种方式安装，甚至包括示例项目。从NPM安装导入，然后将该代码复制到index.js或HTML文件中，您应该在屏幕上看到一个基本的编辑器。研究基本示例存储库以更好地了解各部分如何配合使用。

- Britchie

1

要使用rollup搭建最简化的编辑器，请先安装rollup：

npm i -g rollup

安装 Rollup Resolve 插件：

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

最后，在您的HTML文件中包含build.js和prosemirror-view包中的样式（可选），然后就可以享受了：

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

- Vidar

我结合了这个答案和Rob的答案来获得一个可用的编辑器。 - Andy Beverley

0

我正在对这个问题进行一个更新的回答，因为自上次回答以来，一些ProseMirror和Rollup捆绑包已经升级。

在经过将近3天的搜索后，以下是对我有效的步骤。

在您的应用程序根目录中，初始化node_modules和package.json：

npm init

安装我们将需要用于main.js文件和rollup.config.js文件的ProseMirror和Rollup基本捆绑包：

npm install prosemirror-view prosemirror-model prosemirror-state prosemirror-transform prosemirror-schema-basic @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace @rollup/plugin-terser --save-dev

在您的package.json中，在描述之后添加以下行：

"main": "dist/prosemirror-bundle.min.js",

"module": "public/js/main.js",

"type": "module",

在您的应用程序根目录中创建一个名为rollup.config.js的文件（位于package.json所在的位置），并使用以下行填充它：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';

export default {
    input: 'public/js/main.js', // Entry point for the bundle
    output: {
        file: 'dist/prosemirror-bundle.min.js', // Output file path and name
        format: 'umd', // Format of the output bundle (Universal Module Definition)
        name: 'ProseMirror' // Name of the exported global variable
    },
    plugins: [
        resolve({
            browser: true, // Resolve modules for browser environment
            preferBuiltins: false // Do not prefer built-in modules over local modules
        }),
        commonjs(), // Convert CommonJS modules to ES6
        replace({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), // Replace NODE_ENV variable with 'development' (or current environment)
            preventAssignment: true // Prevent replacement of variable assignment
        }),
        (process.env.NODE_ENV === 'production' && terser()) // If in production environment, minify the code
    ]
};

创建 main.js 文件（我的文件在 public/js 中，如我在 package.json 和 rollup.config.js 中所提到的）并编写以下代码：

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

window.addEventListener('DOMContentLoaded', (event) => {
    console.log("2");

    const editorNode = document.getElementById('mad_interactive_editor');

    const state = EditorState.create({
      schema,
    });
    
    const view = new EditorView(editorNode, {
      state,
    });
});

创建一个 HTML 文件并在其中添加一个 div：

<div id="mad_interactive_editor"></div>

更新您的package.json文件中的依赖项：

npm install

使用rollup配置文件构建您的代码，使用以下命令：

rollup -c

您可以在此命令的末尾添加--watch，以便在编码时继续监视输入文件（main.js）中的更改，如下所示：

rollup -c --watch

如果您不再处于开发环境中，请运行以下命令，它将缩小您的代码：

NODE_ENV=production rollup -c rollup.config.js

然后您应该在html页面中实现ProseMirror。

希望这能帮助到某些人。

- Papa_Ubu

0

我按照@Rob的方法进行了尝试，几乎成功了。只有一个问题，在完成所有步骤后，我遇到了一个错误（见下文）。

这段代码来自官方的第一个示例。

不知道为什么会发生这种情况，我必须在<div id="editor"></div>后手动添加<div id="content"></div>才能开始。

但是<div id="content"></div>不应该自动添加吗？@Rob或官方的第一个示例没有提到您必须添加此div，不知道出了什么问题。

- Cherishh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob · Accepted Answer

我为一位朋友创建了这个指南。希望它能帮助你和任何寻找同样答案的人。它不是完美的，但可以让你开始运行。

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

问题在于如何从零开始设置它并使用演示示例来实现“hello world”的文档很难找到。所有文档都假设您已经设置并运行它。本指南旨在帮助您达到“hello world”阶段。

• 首先设置rollup。请按照此处的说明here进行操作。现在，您应该已经将项目下载到计算机上this，并且当您在浏览器中打开html文件时，会看到“hello world”样式屏幕。

• 进入learn-rollup项目文件夹，然后npm安装prosemirror模块包：

prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup

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

css文件的链接
在body中ID为editor的标签

learn-rollup文件夹结构

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

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

• 运行 \node_module.bin\rollup -c

• 重新加载 .html 文件以查看prosemirror的工作情况。