构建并运行ProseMirror

问题描述 投票:1回答:4

我想建立一个利用诸如ProseMirror之类的所见即所得的网站。他们的文档有点清楚,构建所有内容还不是那么容易的过程,因为他们首先关注开发的其他部分。但是,它们确实提供了project that you can clone and run

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

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

但是,我如何真正使其在浏览器中运行?如果使用浏览器,它只是显示我的文件和文档列表,而不是实际的应用程序。

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

npm prose-mirror
4个回答
3
投票

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

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

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

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

•进入学习汇总项目文件夹并npm安装prosemirror模块软件包:

  1. prosemirror-state。
  2. prosemirror-view。
  3. prosemirror-model
  4. prosemirror-schema-basic
  5. prosemirror-schema-list
  6. prosemirror-example-setup

•在learning-rollup index.html文件中,添加以下htmlhtml code to add to learn-rollup index.html

  1. css文件的链接
  2. 正文中具有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工作。


2
投票

[没有'Hello World'示例可以说明如何自行使用prosemirror库-与问题相关联的基本示例仍需要'使用',如与' Hello World的示例:https://prosemirror.net/examples/basic/-从文档中看起来可以用更简单的方式表示:


1
投票

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


1
投票

您可以检查基于prosemirror构建的该项目:http://www.nibedit.com

© www.soinside.com 2019 - 2024. All rights reserved.