跳过内容

SwaggerEditor

SwaggerEditor 使用 派生(forked)的 Create React App 作为其构建基础设施。

匿名化分析

Swagger Editor 使用 Scarf 收集匿名化安装分析数据。这些分析数据有助于支持此库的维护者,并且**仅**在安装期间运行。要选择退出,您可以在项目的 package.json 中将 scarfSettings.enabled 字段设置为 false

package.json
1
{
2
// ...
3
"scarfSettings": {
4
"enabled": false
5
}
6
// ...
7
}

或者,您可以在安装 npm 包的环境中将环境变量 SCARF_ANALYTICS 设置为 false,例如 SCARF_ANALYTICS=false npm install

入门

先决条件

这些先决条件是安装 SwaggerEditor 作为 npm 包以及本地开发设置所必需的。

安装

假设先决条件已安装,SwaggerEditor npm 包可以安装并与 Node.js >= 12.22.0 配合使用。您可以通过运行以下命令,使用npm CLI 安装 SwaggerEditor

终端窗口
1
$ npm install swagger-editor@alpha

注意:当使用打包工具构建使用 swagger-editor@5 npm 包的项目时,您可能会遇到以下 Node.js 错误:Reached heap limit Allocation failed - JavaScript heap out of memory(达到堆限制,分配失败 - JavaScript 堆内存不足)。这通常是由于需要打包的代码量过大引起的。通过扩展 Node.js 最大堆内存限制可以解决此错误:export NODE_OPTIONS="--max_old_space_size=4096"

用法

在您的应用程序中使用此包

index.js:

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import SwaggerEditor from 'swagger-editor';
4
import 'swagger-editor/swagger-editor.css';
5
6
const url = "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";
7
8
const MyApp = () => (
9
<div>
10
<h1>SwaggerEditor Integration</h1>
11
<SwaggerEditor url={url} />
12
</div>
13
);
14
15
self.MonacoEnvironment = {
16
/**
17
* We're building into the dist/ folder. When application starts on
18
* URL=https://example.com then SwaggerEditor will look for
19
* `apidom.worker.js` on https://example.com/dist/apidom.worker.js and
20
* `editor.worker` on https://example.com/dist/editor.worker.js.
21
*/
22
baseUrl: `${document.baseURI || location.href}dist/`,
23
}
24
25
ReactDOM.render(<MyApp />, document.getElementById('swagger-editor'));

webpack.config.js (webpack@5)

安装 webpack@5 正确构建 SwaggerEditor 所需的依赖项。

终端窗口
1
$ npm i stream-browserify --save-dev
2
$ npm i https-browserify --save-dev
3
$ npm i stream-http --save-dev
4
$ npm i util --save-dev
1
const path = require('path');
2
const webpack = require('webpack');
3
4
module.exports = {
5
mode: 'production',
6
entry: {
7
app: './index.js',
8
'apidom.worker': 'swagger-editor/apidom.worker',
9
'editor.worker': 'swagger-editor/editor.worker',
10
},
11
output: {
12
globalObject: 'self',
13
filename: '[name].js',
14
path: path.resolve(__dirname, 'dist')
15
},
16
resolve: {
17
fallback: {
18
path: false,
19
fs: false,
20
http: require.resolve('stream-http'), // required for asyncapi parser
21
https: require.resolve('https-browserify'), // required for asyncapi parser
22
stream: require.resolve('stream-browserify'),
23
util: require.resolve('util'),
24
url: require.resolve('url'),
25
zlib: false,
26
},
27
alias: {
28
// This alias make sure we don't pull two different versions of monaco-editor
29
'monaco-editor': '/node_modules/monaco-editor',
30
// This alias makes sure we're avoiding a runtime error related to this package
31
'@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',
32
},
33
},
34
plugins: [
35
new webpack.ProvidePlugin({
36
Buffer: ['buffer', 'Buffer'],
37
}),
38
],
39
module: {
40
rules: [
41
{
42
test: /\.css$/,
43
use: ['style-loader', 'css-loader']
44
},
45
/**
46
* The default way in which webpack loads wasm files won’t work in a worker,
47
* so we will have to disable webpack’s default handling of wasm files and
48
* then fetch the wasm file by using the file path that we get using file-loader.
49
*
50
* Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/
51
*
52
* Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.
53
* This configuration reduces the complexity of WASM file loading
54
* but increases the overal bundle size:
55
*
56
* {
57
* test: /\.wasm$/,
58
* type: 'asset/inline',
59
* }
60
*/
61
{
62
test: /\.wasm$/,
63
loader: 'file-loader',
64
type: 'javascript/auto', // this disables webpacks default handling of wasm
65
},
66
]
67
}
68
};

替代的 webpack.config.js (webpack@5)

我们已经为您构建了 Web Workers 片段,它们位于我们的 npm 分发包的 dist/umd/ 目录中。为了避免构建 Web Worker 片段的复杂性,您可以直接使用这些片段。此设置适用于**生产**和**开发**(webpack-dev-server)环境,并将显著缩短您的构建过程。

安装 copy-webpack-plugin 和其他所需的依赖项。

终端窗口
1
$ npm i copy-webpack-plugin --save-dev
2
$ npm i stream-browserify --save-dev
3
$ npm i https-browserify --save-dev
4
$ npm i stream-http --save-dev
5
$ npm i util --save-dev
1
const path = require('path');
2
const webpack = require('webpack');
3
const CopyWebpackPlugin = require('copy-webpack-plugin');
4
5
module.exports = {
6
mode: 'production',
7
entry: {
8
app: './index.js',
9
},
10
output: {
11
globalObject: 'self',
12
filename: 'static/js/[name].js',
13
path: path.resolve(__dirname, 'dist')
14
},
15
resolve: {
16
fallback: {
17
path: false,
18
fs: false,
19
http: require.resolve('stream-http'), // required for asyncapi parser
20
https: require.resolve('https-browserify'), // required for asyncapi parser
21
stream: require.resolve('stream-browserify'),
22
util: require.resolve('util'),
23
url: require.resolve('url'),
24
zlib: false,
25
},
26
alias: {
27
// This alias make sure we don't pull two different versions of monaco-editor
28
'monaco-editor': '/node_modules/monaco-editor',
29
// This alias makes sure we're avoiding a runtime error related to this package
30
'@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',
31
}
32
},
33
plugins: [
34
new webpack.ProvidePlugin({
35
Buffer: ['buffer', 'Buffer'],
36
}),
37
new CopyWebpackPlugin({
38
patterns: [
39
{
40
from: 'node_modules/swagger-editor/dist/umd/apidom.worker.js',
41
to: 'static/js',
42
},
43
{
44
from: 'node_modules/swagger-editor/dist/umd/editor.worker.js',
45
to: 'static/js',
46
}
47
]
48
}),
49
],
50
module: {
51
rules: [
52
{
53
test: /\.css$/,
54
use: ['style-loader', 'css-loader']
55
},
56
]
57
}
58
};

开发

先决条件

假设先决条件已安装,本仓库运行所需的最低版本是 Node.js >=20.3.0npm >=9.6.7,但我们建议使用 Node.js@20 的最新版本。

设置

如果您使用 nvm,在此仓库中运行以下命令将自动为您选择正确的 Node.js 版本

终端窗口
1
$ nvm use

运行以下命令以设置仓库进行本地开发

终端窗口
1
$ git clone https://github.com/swagger-api/swagger-editor.git
2
$ cd swagger-editor
3
$ git checkout next
4
$ git submodule init
5
$ git submodule update
6
$ npm i
7
$ npm start

npm 脚本

代码检查

终端窗口
1
$ npm run lint

运行单元和集成测试

终端窗口
1
$ npm test

运行 E2E Cypress 测试

开发环境中使用

终端窗口
1
$ npm run cy:dev

持续集成 (CI) 环境中使用

终端窗口
1
$ npm run cy:ci

构建

终端窗口
1
$ npm run build

此脚本将构建所有 SwaggerEditor 构建工件 - appesmumd

构建工件

构建工件后,将创建两个新目录:build/dist/

build/

终端窗口
1
$ npm run build:app
2
$ npm run build:app:serve

构建并提供独立的 SwaggerEditor 应用程序及其所有资产,地址为 http://localhost:3050/

dist/esm/

终端窗口
1
$ npm run build:bundle:esm

此捆绑包适用于第三方使用,他们希望在自己的应用程序中将 SwaggerEditor 用作库,并拥有自己的构建过程。

dist/umd/

终端窗口
1
$ npm run build:bundle:umd

SwaggerEditor UMD 捆绑包在全局对象上导出 SwaggerEditor 符号。它与定义为外部的 React 一起捆绑。这允许消费者使用自己的 React + ReactDOM 版本并延迟挂载 SwaggerEditor。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta
7
name="description"
8
content="SwaggerEditor"
9
/>
10
<title>SwaggerEditor</title>
11
<link rel="stylesheet" href="./swagger-editor.css" />
12
</head>
13
<body>
14
<div id="swagger-editor"></div>
15
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
16
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
17
<script src="./dist/umd/swagger-editor.js"></script>
18
<script>
19
const props = {
20
url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',
21
};
22
const element = React.createElement(SwaggerEditor, props);
23
const domContainer = document.querySelector('#swagger-editor');
24
25
ReactDOM.render(element, domContainer);
26
</script>
27
</body>
28
</html>

npm

SwaggerEditor 作为 swagger-editor@5 npm 包在 npmjs.com 上发布。也可以通过运行以下命令手动生成包(假设您已遵循设置步骤)

终端窗口
1
$ npm run build:bundle:esm
2
$ npm run build:bundle:umd
3
$ npm pack

包映射

SwaggerEditor 在 package.json 文件中以以下方式映射其构建工件

1
"unpkg": "./dist/umd/swagger-editor.js",
2
"module": "./dist/esm/swagger-editor.js",
3
"browser": "./dist/esm/swagger-editor.js",
4
"jsnext:main": "./dist/esm/swagger-editor.js",
5
"exports": {
6
"./package.json": "./package.json",
7
"./swagger-editor.css": "./dist/swagger-editor.css",
8
".": {
9
"browser": "./dist/esm/swagger-editor.js"
10
},
11
"./plugins/*": {
12
"browser": "./dist/esm/plugins/*/index.js"
13
},
14
"./presets/*": {
15
"browser": "./dist/esm/presets/*/index.js"
16
},
17
"./apidom.worker": {
18
"browser": "./dist/esm/apidom.worker.js"
19
},
20
"./editor.worker": {
21
"browser": "./dist/esm/editor.worker.js"
22
}
23
}

要了解有关这些字段的更多信息,请参阅 webpack mainFields 文档Node.js 模块:包文档

文档

使用旧版 React

[!重要] 较旧版本特指 React >=17 <18

默认情况下,swagger-editor@5 npm 包附带最新版本的 React@18。可以使用 swagger-editor@5 npm 包与旧版 React 配合使用。

假设我的应用程序与 swagger-editor@5 npm 包集成并使用 React@17.0.2

npm

为了告知 swagger-editor@5 npm 包我要求它使用我的 React 版本,我需要使用npm overrides

1
{
2
"dependencies": {
3
"react": "=17.0.2",
4
"react-dom": "=17.0.2"
5
},
6
"overrides": {
7
"swagger-editor": {
8
"react": "$react",
9
"react": "$react-dom",
10
"react-redux": "^8"
11
}
12
}
13
}

[!注意] React 和 ReactDOM 覆盖被定义为对依赖项的引用。由于 react-redux@9 仅支持 React >= 18,我们需要使用 react-redux@8

yarn

为了告知 swagger-editor@5 npm 包我要求它使用我的特定 React 版本,我需要使用yarn resolutions

1
{
2
"dependencies": {
3
"react": "17.0.2",
4
"react-dom": "17.0.2"
5
},
6
"resolutions": {
7
"swagger-editor/react": "17.0.2",
8
"swagger-editor/react-dom": "17.0.2",
9
"swagger-editor/react-redux": "^8"
10
}
11
}

[!注意] React 和 ReactDOM 的解析不能定义为对依赖项的引用。不幸的是,yarn 不像 npm 那样支持 $react$react-dom 这样的别名。您需要指定确切的版本。

定制

环境变量

可以使用环境变量来指定本地 JSON/YAML 文件或远程 URL,供 SwaggerEditor 在启动时加载。这些环境变量将在构建时被嵌入到构建工件中。

当前可用的环境变量

变量名描述
REACT_APP_DEFINITION_FILE指定一个本地文件路径,并且指定的文件也必须存在于 /public/static 目录中
REACT_APP_DEFINITION_URL指定一个远程 URL。此环境变量目前优先于 REACT_APP_SWAGGER_FILE
REACT_APP_VERSION指定此应用程序的版本。版本从 package.json 文件中读取。

环境变量示例值可在 .env 文件中找到。有关使用环境变量的更多信息,请参阅 Create React App 文档的添加自定义环境变量部分。

在 SwaggerUI 中使用预览插件

SwaggerEditor 附带了一些 preview 插件,它们负责渲染在编辑器中创建的定义。这些插件包括

  • EditorPreviewAsyncAPIPlugin - AsyncAPI 规范渲染支持
  • EditorPreviewAPIDesignSystemsPlugin - API 设计系统渲染支持

稍作调整,我们可以将这些插件与 SwaggerUI 结合使用,以提供使用 SwaggerUI 渲染 AsyncAPI 或 API 设计系统定义的能力。

1
import SwaggerUI from 'swagger-ui';
2
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
3
import 'swagger-editor/swagger-editor.css';
4
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
5
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
6
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
7
import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';
8
9
SwaggerUI({
10
url: 'https://petstore.swagger.io/v2/swagger.json',
11
dom_id: '#swagger-ui',
12
presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],
13
plugins: [
14
EditorContentTypePlugin,
15
EditorPreviewAsyncAPIPlugin,
16
EditorPreviewAPIDesignSystemsPlugin,
17
SwaggerUIAdapterPlugin,
18
SwaggerUI.plugins.DownloadUrl,
19
],
20
});

这里的关键是 SwaggerUIAdapter 插件,它使 SwaggerEditor 插件能够直接与 SwaggerUI 配合使用。

独立模式

SwaggerUI 也支持独立模式。在独立模式下,您将获得一个带有输入框的 TopBar,可以在其中提供定义 URL,然后 SwaggerUI 将加载此定义。

1
import SwaggerUI from 'swagger-ui';
2
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
3
import 'swagger-ui/dist/swagger-ui.css';
4
import 'swagger-editor/swagger-editor.css';
5
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
6
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
7
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
8
import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';
9
10
SwaggerUI({
11
url: 'https://petstore.swagger.io/v2/swagger.json',
12
dom_id: '#swagger-ui',
13
presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],
14
plugins: [
15
EditorContentTypePlugin,
16
EditorPreviewAsyncAPIPlugin,
17
EditorPreviewAPIDesignSystemsPlugin,
18
SwaggerUIAdapterPlugin,
19
SwaggerUI.plugins.DownloadUrl,
20
],
21
layout: 'StandaloneLayout',
22
});

通过 unpkg.com 利用预览插件

可以通过 unpkg.com 以无需构建的方式利用预览插件,来创建支持多规范的独立版 SwaggerUI。

1
<!DOCTYPE html>
2
<html >
3
<head>
4
<meta charset="utf-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta name="theme-color" content="#000000" />
7
<meta name="description" content="SwaggerUIMultifold" />
8
<link rel="stylesheet" href="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/swagger-editor.css" />
9
</head>
10
<body style="margin:0; padding:0;">
11
<section id="swagger-ui"></section>
12
13
<script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js"></script>
14
<script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js"></script>
15
<script>
16
ui = SwaggerUIBundle({});
17
// expose SwaggerUI React globally for SwaggerEditor to use
18
window.React = ui.React;
19
</script>
20
<script src="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/umd/swagger-editor.js"></script>
21
<script>
22
SwaggerUIBundle({
23
url: 'https://petstore3.swagger.io/api/v3/openapi.json',
24
dom_id: '#swagger-ui',
25
presets: [
26
SwaggerUIBundle.presets.apis,
27
SwaggerUIStandalonePreset,
28
],
29
plugins: [
30
SwaggerEditor.plugins.EditorContentType,
31
SwaggerEditor.plugins.EditorPreviewAsyncAPI,
32
SwaggerEditor.plugins.EditorPreviewApiDesignSystems,
33
SwaggerEditor.plugins.SwaggerUIAdapter,
34
SwaggerUIBundle.plugins.DownloadUrl,
35
],
36
layout: 'StandaloneLayout',
37
});
38
</script>
39
</body>
40
</html>

组合定制的 SwaggerEditor 版本

SwaggerEditor 只是与 swagger-ui-react 一起使用的一些 SwaggerUI 插件的集合。可以通过将单个插件与 swagger-uiswagger-ui-react 组合来创建自定义的 SwaggerEditor 版本。

插件

可用插件列表

  • dialogs
  • dropdown-menu
  • dropzone
  • editor-content-fixtures
  • editor-content-origin
  • editor-content-persistence
  • editor-content-read-only
  • editor-content-type
  • editor-monaco
  • editor-monaco-language-apidom
  • editor-preview
  • editor-preview-api-design-systems
  • editor-preview-asyncapi
  • editor-preview-swagger-ui
  • editor-safe-render
  • editor-textarea
  • layout
  • modals
  • splash-screen
  • swagger-ui-adapter
  • top-bar
  • versions

可以通过以下方式导入单个插件

1
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
2
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';

预设

除插件外,预设也可用。预设是旨在协同工作以提供复合功能的插件集合。

可用预设列表

  • textarea
  • monaco

可以通过以下方式导入单个预设

1
import TextareaPreset from 'swagger-editor/presets/textarea';
2
import MonacoPreset from 'swagger-editor/presets/monaco';

注意:请参阅 SwaggerUI 的扩展点文档,了解如何将预设传递给 SwaggerUI。

与 swagger-ui 组合

1
import SwaggerUI from 'swagger-ui';
2
import 'swagger-ui/dist/swagger-ui.css';
3
import ModalsPlugin from 'swagger-editor/plugins/modals';
4
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
5
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
6
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
7
import VersionsPlugin from 'swagger-editor/plugins/versions';
8
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
9
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
10
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
11
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
12
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
13
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
14
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
15
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
16
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
17
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
18
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
19
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
20
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
21
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
22
import LayoutPlugin from 'swagger-editor/plugins/layout';
23
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';
24
25
SwaggerUI({
26
url: 'https://petstore.swagger.io/v2/swagger.json',
27
dom_id: '#swagger-editor',
28
plugins: [
29
ModalsPlugin,
30
DialogsPlugin,
31
DropdownMenuPlugin,
32
DropzonePlugin,
33
VersionsPlugin,
34
EditorTextareaPlugin,
35
EditorMonacoPlugin,
36
EditorMonacoLanguageApiDOMPlugin,
37
EditorContentReadOnlyPlugin,
38
EditorContentOriginPlugin,
39
EditorContentTypePlugin,
40
EditorContentPersistencePlugin,
41
EditorContentFixturesPlugin,
42
EditorPreviewPlugin,
43
EditorPreviewSwaggerUIPlugin,
44
EditorPreviewAsyncAPIPlugin,
45
EditorPreviewApiDesignSystemsPlugin,
46
TopBarPlugin,
47
SplashScreenPlugin,
48
LayoutPlugin,
49
EditorSafeRenderPlugin,
50
],
51
layout: 'StandaloneLayout',
52
});

与 swagger-ui-react 组合

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import SwaggerUI from 'swagger-ui-react';
4
import 'swagger-ui-react/swagger-ui.css';
5
import ModalsPlugin from 'swagger-editor/plugins/modals';
6
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
7
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
8
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
9
import VersionsPlugin from 'swagger-editor/plugins/versions';
10
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
11
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
12
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
13
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
14
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
15
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
16
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
17
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
18
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
19
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
20
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
21
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
22
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
23
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
24
import LayoutPlugin from 'swagger-editor/plugins/layout';
25
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';
26
27
const SwaggerEditor = () => {
28
return (
29
<SwaggerUI
30
url={url}
31
plugins={[
32
ModalsPlugin,
33
DialogsPlugin,
34
DropdownMenuPlugin,
35
DropzonePlugin,
36
VersionsPlugin,
37
EditorTextareaPlugin,
38
EditorMonacoPlugin,
39
EditorMonacoLanguageApiDOMPlugin,
40
EditorContentReadOnlyPlugin,
41
EditorContentOriginPlugin,
42
EditorContentTypePlugin,
43
EditorContentPersistencePlugin,
44
EditorContentFixturesPlugin,
45
EditorPreviewPlugin,
46
EditorPreviewSwaggerUIPlugin,
47
EditorPreviewAsyncAPIPlugin,
48
EditorPreviewApiDesignSystemsPlugin,
49
TopBarPlugin,
50
SplashScreenPlugin,
51
LayoutPlugin,
52
EditorSafeRenderPlugin,
53
]}
54
layout="StandaloneLayout"
55
/>
56
);
57
};
58
59
ReactDOM.render(<SwaggerEditor />, document.getElementById('swagger-editor'));

Docker

预构建的 DockerHub 镜像

SwaggerEditor 可作为预构建的 Docker 镜像使用,托管在 docker.swagger.io 上。

终端窗口
1
$ docker pull docker.swagger.io/swaggerapi/swagger-editor:next-v5
2
$ docker run -d -p 8080:80 docker.swagger.io/swaggerapi/swagger-editor:next-v5

本地构建

特权镜像:

终端窗口
1
$ npm run build:app
2
$ docker build . -t swaggerapi/swagger-editor:next-v5
3
$ docker run -d -p 8080:80 swaggerapi/swagger-editor:next-v5

现在在浏览器中打开 http://localhost:8080/

非特权镜像:

终端窗口
1
$ npm run build:app
2
$ docker build . -f Dockerfile.unprivileged -t swaggerapi/swagger-editor:next-v5-unprivileged
3
$ docker run -d -p 8080:8080 swaggerapi/swagger-editor:next-v5-unprivileged

现在在浏览器中打开 http://localhost:8080/

SwaggerEditor 目前**不支持**自定义环境变量。

许可证

SwaggerEditor 采用 Apache 2.0 许可证。SwaggerEditor 附带一个明确的 NOTICE 文件,其中包含额外的法律通知和信息。

本项目使用 REUSE 规范,该规范定义了声明软件项目版权和许可的标准化方法。

软件物料清单 (SBOM)

软件物料清单可在本仓库的依赖图中获取。点击 Export SBOM 按钮以下载 SPDX 格式的 SBOM。

© . All rights reserved.