Question

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

我不知道如何实际运行这个例子。

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

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

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

Answer 1

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

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

问题在于有关如何设置文档使用演示将它从无到有变成一个世界例子是不存在的。所有文档均假设您已经设置并开始工作了。本指南可帮助您进入“ hello world”阶段

•首次设置汇总。请遵循该here的说明。您现在应该在计算机上拥有该项目在this中打开，然后在浏览器中打开html文件时，请参见“ hello world”样式屏幕。

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

前半国家。
prosemirror视图。
prosemirror模型
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup

••在学习汇总index.html文件中添加以下html html code to add to learn-rollup index.html

css文件的链接
正文中具有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 2

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

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

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

Answer 3

没有“ Hello World”示例可以展示如何使用prosemirror库本身-与问题相关联的基本示例仍需要“使用”，如最近的情况所示。转到“ 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})

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

使用ProseMirror核心库需要您阅读文档-概述部分：http://prosemirror.net/docs/guide/#intro和参考部分：http://prosemirror.net/docs/ref/#top.intro

Answer 4

您可以检查基于prosemirror：http://www.nibedit.com

这是使用react和prosemirror构建的非常简化的库。

Answer 5

要使用汇总启动并运行最小编辑器，请先安装汇总：

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>

构建和运行ProseMirror

5 个答案: