我想建立一个网站,将利用所见即所得,如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。我以前没有使用过它,也许它有一些命令?
6条答案
按热度按时间roejwanj1#
我经历了@Rob的方法,几乎成功了。只有一件事,在完成所有步骤后,我遇到了一个错误(见下文)。
代码来自官方的第一个示例。
不知道为什么会发生这种情况,我必须手动将
<div id="content"></div>
放在<div id="editor"></div>
之后才能开始。但是
<div id="content"></div>
不应该自动添加吗?@Rob或者官方的第一个例子没有提到你必须添加这个div,不知道出了什么问题。pxyaymoc2#
我对这个问题做了一个***更新***的回答,因为自从上次回答之后,一些ProseMirror和Rollup包已经升级了。
以下是在网上搜索了近3天后对我起作用的步骤。
在应用的根目录中,初始化node_modules和package.json:
npm初始化
安装main.js文件和rollup.config.js文件所需的ProseMirror和Rollup基本包:
npm安装进程镜像-查看进程镜像-模型进程镜像-状态进程镜像-转换进程镜像-模式-基本@汇总/插件-公用js @汇总/插件-节点-解析@汇总/插件-替换@汇总/插件-terser--保存-开发
在您的package.json中,在描述后添加以下行:
“主”:“远端/进程镜像包.最小. js”,
“模块”:“公共/js/main. js”,
“类型”:“模块”,
在应用程序的根目录(package.json所在的位置)中创建一个名为rollup.config.js的文件,并使用以下行填充该文件:
创建main.js文件(我的文件在public/js中,正如我在package.json和rollup.config.js中提到的那样),并记下以下行:
创建一个html文件并在其中添加一个div:
**使用依赖项更新package.json:**
npm安装
使用汇总配置文件和以下命令生成代码:
汇总-c
您可以在此命令的末尾添加-watch,以便在编写如下代码时监视输入文件(main.js)中的更改:
汇总-c -手表
如果您不再处于开发环境中,请运行以下命令,它将缩小您的代码:
NODE_ENV=生产汇总-c rollup.config.js
您应该在html页面中实现ProseMirror。
希望这能帮到什么人。
2izufjch3#
我为一个朋友创建了这个指南。希望它能帮助你和任何寻找相同答案的人。它并不完美,但能让你开始运行。
ProseMirror是一个基于contentEditable的行为良好的富语义内容编辑器,支持协作编辑和自定义文档模式。
问题是关于如何使用演示示例将其从无到有设置为hello world的文档是不存在的。所有文档都假设您已经设置并运行了它。本指南旨在帮助您进入“hello world”阶段
·第一次安装汇总。按照here的说明操作。现在,您的计算机上应该有来自this的项目,当您在浏览器中打开html文件时,会看到“hello world”风格的屏幕。
· cd到learn-rollup项目文件夹并npm安装prosemirror模块包:
1.伪镜像状态。
1.伪镜像。
1.拟似误差模型
1.韵律镜像-图式-基本
1.拟镜像-模式-表
1.拟镜像-示例-设置
·在学习汇总index.html文件中添加以下html html code to add to learn-rollup index.html
1.指向css文件的链接
learn-rollup folder structure
·创建src/scripts/main.js的副本并将其重命名为mainbackup.js。
·现在用www.example.com first example中的代码替换main.js中的所有内容prosemirror.net。
·运行\节点模块.bin\汇总-c
·重新加载.html以查看prosemirror的工作情况。
uidvcgyl4#
没有“Hello World”示例说明如何使用
prosemirror
库本身-问题中链接到的基本示例仍然需要“使用”,如最接近“Hello World”示例的内容所示:https://prosemirror.net/examples/basic/-从文档中看起来可以用更简单的方式表示:相反,您可以查看提供复制/粘贴编辑器并可以合并到项目中的 Package 器库。
使用ProseMirror核心库需要阅读文档-其中有概述部分:http://prosemirror.net/docs/guide/#intro,以及参考部分:http://prosemirror.net/docs/ref/#top.intro
gfttwv5a5#
如果转到the basic example,您将看到一些使用您链接到的示例项目的代码。
这个项目需要更好的记录,恕我直言。我不认为它应该是一个运行散文镜像的例子,但更多的是一个将所有不同部分连接在一起的例子。
ProseMirror的所有部分都在NPM上,可以用这种方式安装,甚至示例项目也是如此。从NPM安装导入,然后将代码复制到index.js或HTML文件中,屏幕上应该有一个基本的编辑器。学习基本的示例repo可以更好地理解这些部分是如何组合在一起的。
ovfsdjhp6#
要使用Rollup启动并运行最小编辑器,请先安装Rollup:
安装汇总解析插件:
然后将以下内容添加到
rollup.config.js
文件中:安装prosemirror基本库:
创建包含以下内容的
main.js
文件:构建您的编辑器(到build.js):
最后,将
build.js
和prosemirror-view包中的可选样式包含到HTML文件中,并享受: