折旧

这一构成部分已贬值。 使用 @advanced-rest-client/app 换句话说.

一个模块,包含UI区域以及渲染出HTTP正文编辑器的逻辑.

该套件包含:

• 人体编辑器 - 用专门的编辑器来编辑不同类型数据的元素
• 活体编辑 - 摩纳哥编辑部活体编辑.
• 身体-多部分编辑器 用于多部分形式数据生成的元素
• 机构形式数据编辑器 - 基于窗体的输入 www-url-form-encoded 类型

使用量

安装

npm install --save @advanced-rest-client/body-editor

机身编辑器

编辑器可以产生值 string, (中文(简体) ), File,或 FormData中还生成 model ,在恢复先前状态时,应当被放回编辑器上(而不是值). 编辑器可以从每个支持的数据类型中生成视图模型,但同时设定 value 编辑 model 将重复工作,最后一组值将获胜.

视图模型保持每个编辑器的配置(raw/FormData/URL编码). 编辑器的值是当前已提供编辑器的值. 当用户切换编辑器时,会生成一个新的值.

另外,见原始编辑器的注释,以查看要求清单.

示例

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/body-editor/body-editor.js';

class SampleElement extends LitElement {
  render() {
    const {body, model} = this;
    const setValue = Array.isArray(model) && model.length ? undefined : body;
    return html`
    <body-editor
      .value="${setValue}"
      .model="${model}"
      @change="${this.valueAndModelHandler}"
      autoEncode
      contentType="application/json"
      selected="raw"
      editorType="Monaco"
    ></body-editor>
    `;
  }
}
customElements.define('sample-element', SampleElement);

这个 autoEncode 属性允许在 www-url-form-encoded 编辑器和自动处理值处理。 这个 contentType 属性被传递到原始编辑器 以检测要使用的语言。 这个 editorType 允许在摩纳哥和CodeMirror编辑器之间切换,以便与珍贵元素相容.

外部依赖关系

摩纳哥和CodeMirror编辑器都具有外部依赖性,必须从要素的外侧纳入。 您可以检查演示文件夹, 查看如何在演示环境中处理 .

摩纳哥属地

在运行组件前将摩纳哥纳入应用程序。 目前该组件不能直接包含,因为摩纳哥执行CSS文件中的导入.

摩纳哥使用网络工人来工作. 这些工人必须进入申请的最后阶段。 设置全局 MonacoEnvironment 以指导摩纳哥编辑如何找到工人。 另外,请查看摩纳哥的文献,了解更多WebPack的构建过程和插件.

window.MonacoEnvironment = {
  getWorker: (moduleId, label) => {
    let url;
    const prefix = '../node_modules/monaco-editor/esm/vs/';
    const langPrefix = `${prefix}language/`;
    switch (label) {
      case 'json': url = `${langPrefix}json/json.worker.js`; break;
      case 'css': url = `${langPrefix}css/css.worker.js`; break;
      case 'html': url = `${langPrefix}html/html.worker.js`; break;
      case 'javascript':
      case 'typescript': url = `${langPrefix}typescript/ts.worker.js`; break;
      default: url = `${prefix}editor/editor.worker.js`; break;
    }
    return new Worker(url, {
      type: 'module', // <- this uses workers from the `esm` build so the web worker must handle modules properly.
    });
  }
}

代码

CodeMiror不与ES模块合作. 图书馆期望全球 CodeMirror 对象将设置在全局对象上. 这是要装入页面的文件列表 在此之前 身体编辑器初始化 :

• codemirror/lib/codemirror.js
• jsonlint/lib/jsonlint.js
• codemirror/addon/mode/loadmode.js
• codemirror/mode/meta.js
• codemirror/mode/javascript/javascript.js
• codemirror/mode/xml/xml.js
• codemirror/mode/htmlmixed/htmlmixed.js
• codemirror/addon/lint/lint.js
• codemirror/addon/lint/json-lint.js
• codemirror/addon/lint/lint.css - 这是cs!

此外,电解器要求将该模块作为ES模块加载: @advanced-rest-client/code-mirror-linter/code-mirror-linter.js。 。 。 .

最后设定 CodeMirror.modeURL 属性指向代码镜像模式位置.

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

发展

git clone https://github.com/advanced-rest-client/body-editor
cd body-editor
npm install

本地运行演示

npm start

运行测试

npm test