被否决

这一构成部分已贬值。 代码基础已移动到 api 请求 模块.

对应所选媒体类型的Renders正体编辑器.

它与AMF数据模型合作,以产生有值的预先被流行的视图.

参见此文档下方的断开更改和所需依赖性列表

版本兼容性

此版本仅与AMF模式版本2(AMF parser QQ 4.0.0)相通. 用于与上一个模型版本的兼容性 3.x.x 版本的组件.

使用量

安装

npm install --save @api-components/api-body-editor

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@api-components/api-body-editor/api-body-editor.js';
    </script>
  </head>
  <body>
    <api-body-editor></api-body-editor>
    <script>
    {
      document.querySelector('api-body-editor').addEventListener('value-changed', (e) => {
        console.log(e.detail.value);
      });
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@api-components/api-body-editor/api-body-editor.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <api-body-editor
      allowdisableparams
      allowcustom
      allowhideoptional
      .contentType="${this.contentType}"
      @value-changed="${this._handleValue}"></api-headers-editor>
    `;
  }

  _handleValue(e) {
    this.bodyValue = e.target.value;
  }
}
customElements.define('sample-element', SampleElement);

发展

本地运行演示

npm start

运行测试

npm test

API 组件

此组件是 API 生态系统组成部分

V3 中突破更改

在导入此元素前, 您需要将 CodeMiror 包含在文档中 因为它期望这个全球变量已经设定.

这是CodeMiror无法作为ES模块运行的原因.

使用您的构建系统将 CodeMiror 捆绑到构建中, 不要忘记输出全局变量 .

<!-- CodeMirror + modes loader -->
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="node_modules/codemirror/mode/meta.js"></script>
<!--Default set of parsers, add as many as you need -->
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="node_modules/codemirror/mode/xml/xml.js"></script>
<script src="node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- JSON linter -->
<script src="node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="node_modules/codemirror/addon/lint/lint.js"></script>
<script src="node_modules/codemirror/addon/lint/json-lint.js"></script>

添加 linter 弹出样式 :

<link rel="stylesheet" href="node_modules/codemirror/addon/lint/lint.css" />

最后,您应该设置 CodeMiror 模式的路径 。 当内容类型改变 此路径用于装入语法亮点 。 如果您在脚本中列出所有模式 以上则不需要.

<script>
CodeMirror.modeURL = 'node_modules/codemirror/mode/%N/%N.js';
</script>

这个 jsonlint 库是 @api-components/code-mirror-linter 已包含在此元素的依赖图中.