npm 构建和运行ProseMirror

bqucvtff  于 2023-03-18  发布在  其他
关注(0)|答案(6)|浏览(315)

我想建立一个网站,将利用所见即所得,如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。我以前没有使用过它,也许它有一些命令?

roejwanj

roejwanj1#

我经历了@Rob的方法,几乎成功了。只有一件事,在完成所有步骤后,我遇到了一个错误(见下文)。

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

不知道为什么会发生这种情况,我必须手动将<div id="content"></div>放在<div id="editor"></div>之后才能开始。
但是<div id="content"></div>不应该自动添加吗?@Rob或者官方的第一个例子没有提到你必须添加这个div,不知道出了什么问题。

pxyaymoc

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的文件,并使用以下行填充该文件:

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安装

使用汇总配置文件和以下命令生成代码:

汇总-c

您可以在此命令的末尾添加-watch,以便在编写如下代码时监视输入文件(main.js)中的更改:

汇总-c -手表

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

NODE_ENV=生产汇总-c rollup.config.js

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

希望这能帮到什么人。

2izufjch

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文件的链接

  1. body中id=editor的标记
    learn-rollup folder structure
    ·创建src/scripts/main.js的副本并将其重命名为mainbackup.js。
    ·现在用www.example.com first example中的代码替换main.js中的所有内容prosemirror.net。
    ·运行\节点模块.bin\汇总-c
    ·重新加载.html以查看prosemirror的工作情况。
uidvcgyl

uidvcgyl4#

没有“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})

相反,您可以查看提供复制/粘贴编辑器并可以合并到项目中的 Package 器库。
使用ProseMirror核心库需要阅读文档-其中有概述部分:http://prosemirror.net/docs/guide/#intro,以及参考部分:http://prosemirror.net/docs/ref/#top.intro

gfttwv5a

gfttwv5a5#

如果转到the basic example,您将看到一些使用您链接到的示例项目的代码。
这个项目需要更好的记录,恕我直言。我不认为它应该是一个运行散文镜像的例子,但更多的是一个将所有不同部分连接在一起的例子。
ProseMirror的所有部分都在NPM上,可以用这种方式安装,甚至示例项目也是如此。从NPM安装导入,然后将代码复制到index.js或HTML文件中,屏幕上应该有一个基本的编辑器。学习基本的示例repo可以更好地理解这些部分是如何组合在一起的。

ovfsdjhp

ovfsdjhp6#

要使用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>

相关问题