Swagger 編輯器

SwaggerEditor 使用 forked Create React App 作為其建置基礎架構。

開始使用

必要條件

安裝 SwaggerEditor 作為 npm 套件和本機開發設定都需要這些必要條件。

node-gyp 搭配 Python 3.x
GLIBC >=2.29
需要安裝 emscripten 或 docker，我們建議使用 docker 選項

安裝

假設已安裝必要條件，SwaggerEditor npm 套件可安裝且適用於 Node.js >= 12.22.0。您可以使用 npm CLI 執行以下命令來安裝 SwaggerEditor

1
 $ npm install swagger-editor@alpha

注意：當使用 bundler 建置使用 swagger-editor@5 npm 套件的專案時，您可能會遇到以下 Node.js 錯誤：Reached heap limit Allocation failed - JavaScript heap out of memory。這是因為需要捆綁大量程式碼所導致。此錯誤可以透過擴充 Node.js 最大堆積限制來解決：export NODE_OPTIONS="--max_old_space_size=4096"。

使用方式

在您的應用程式中使用套件

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 =
7
  "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";
8

9
const MyApp = () => (
10
  <div>
11
    <h1>SwaggerEditor Integration</h1>
12
    <SwaggerEditor url={url} />
13
  </div>
14
);
15

16
self.MonacoEnvironment = {
17
  /**
18
   * We're building into the dist/ folder. When application starts on
19
   * URL=https://example.com then SwaggerEditor will look for
20
   * `apidom.worker.js` on https://example.com/dist/apidom.worker.js and
21
   * `editor.worker` on https://example.com/dist/editor.worker.js.
22
   */
23
  baseUrl: `${document.baseURI || location.href}dist/`,
24
};
25

26
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$":
32
        "/node_modules/@stoplight/ordered-object-literal/src/index.mjs",
33
    },
34
  },
35
  plugins: [
36
    new webpack.ProvidePlugin({
37
      Buffer: ["buffer", "Buffer"],
38
    }),
39
  ],
40
  module: {
41
    rules: [
42
      {
43
        test: /\.css$/,
44
        use: ["style-loader", "css-loader"],
45
      },
46
      /**
47
       * The default way in which webpack loads wasm files won’t work in a worker,
48
       * so we will have to disable webpack’s default handling of wasm files and
49
       * then fetch the wasm file by using the file path that we get using file-loader.
50
       *
51
       * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/
52
       *
53
       * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.
54
       * This configuration reduces the complexity of WASM file loading
55
       * but increases the overal bundle size:
56
       *
57
       * {
58
       *   test: /\.wasm$/,
59
       *   type: 'asset/inline',
60
       * }
61
       */
62
      {
63
        test: /\.wasm$/,
64
        loader: "file-loader",
65
        type: "javascript/auto", // this disables webpacks default handling of wasm
66
      },
67
    ],
68
  },
69
};

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

我們已為您建置了 Web Worker 片段，它們位於我們的 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$":
31
        "/node_modules/@stoplight/ordered-object-literal/src/index.mjs",
32
    },
33
  },
34
  plugins: [
35
    new webpack.ProvidePlugin({
36
      Buffer: ["buffer", "Buffer"],
37
    }),
38
    new CopyWebpackPlugin({
39
      patterns: [
40
        {
41
          from: "node_modules/swagger-editor/dist/umd/apidom.worker.js",
42
          to: "static/js",
43
        },
44
        {
45
          from: "node_modules/swagger-editor/dist/umd/editor.worker.js",
46
          to: "static/js",
47
        },
48
      ],
49
    }),
50
  ],
51
  module: {
52
    rules: [
53
      {
54
        test: /\.css$/,
55
        use: ["style-loader", "css-loader"],
56
      },
57
    ],
58
  },
59
};

開發

必要條件

假設已安裝必要條件，Node.js >=20.3.0 和 npm >=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 指令碼

Lint

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 建置成品 - app、esm 和 umd。

建置成品

建置成品後，將會建立兩個新的目錄：build/ 和 dist/。

build/

1
$ npm run build:app
2
$ npm run build:app:serve

建置並在 https://127.0.0.1:3050/ 上提供獨立的 SwaggerEditor 應用程式及其所有資源。

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 name="description" content="SwaggerEditor" />
7
    <title>SwaggerEditor</title>
8
    <link rel="stylesheet" href="./swagger-editor.css" />
9
  </head>
10
  <body>
11
    <div id="swagger-editor"></div>
12
    <script
13
      src="https://unpkg.com/react@18/umd/react.production.min.js"
14
      crossorigin
15
    ></script>
16
    <script
17
      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
18
      crossorigin
19
    ></script>
20
    <script src="./dist/umd/swagger-editor.js"></script>
21
    <script>
22
      const props = {
23
        url: "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml",
24
      };
25
      const element = React.createElement(SwaggerEditor, props);
26
      const domContainer = document.querySelector("#swagger-editor");
27

28
      ReactDOM.render(element, domContainer);
29
    </script>
30
  </body>
31
</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

[!IMPORTANT] 較舊的版本特別是指 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
}

[!NOTE] 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
}

[!NOTE] 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
9
      rel="stylesheet"
10
      href="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/swagger-editor.css"
11
    />
12
  </head>
13
  <body style="margin:0; padding:0;">
14
    <section id="swagger-ui"></section>
15

16
    <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js"></script>
17
    <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js"></script>
18
    <script>
19
      ui = SwaggerUIBundle({});
20
      // expose SwaggerUI React globally for SwaggerEditor to use
21
      window.React = ui.React;
22
    </script>
23
    <script src="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/umd/swagger-editor.js"></script>
24
    <script>
25
      SwaggerUIBundle({
26
        url: "https://petstore3.swagger.io/api/v3/openapi.json",
27
        dom_id: "#swagger-ui",
28
        presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
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-ui 和 swagger-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 的 Plug points 文件，以了解如何將預設集傳遞給 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 映像形式提供，託管於 DockerHub 上。

1
$ docker pull swaggerapi/swagger-editor:next-v5
2
$ docker run -d -p 8080:80 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

現在在瀏覽器中開啟 https://127.0.0.1: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

現在在瀏覽器中開啟 https://127.0.0.1:8080/。

SwaggerEditor 目前**不**支援自訂環境變數。

授權

SwaggerEditor 授權於 Apache 2.0 授權。SwaggerEditor 隨附明確的 NOTICE 檔案，其中包含額外的法律通知和資訊。

此專案使用 REUSE 規格，該規格定義了宣告軟體專案著作權和授權的標準化方法。

軟體物料清單 (SBOM)

軟體物料清單 (SBOM) 可在此存放庫的相依性圖表中取得。按一下「Export SBOM」按鈕，以 SPDX 格式下載 SBOM。