被否决
这一构成部分已贬值。 代码基础已移动到 机身编辑器 模块.
一个带有CodeMiror编辑器的元素,允许用户输入HTTP消息正文.
本部分不再开发. 请不要使用它.
V3 中突破更改
- 升级
该元素现在使用LitElement库来代替Polymer. 这意味着所有属性都是小写,没有 - 字符键.
举例来说,以前 lineSeparator 财产反映为 line-separator 属性。 现在是 lineseparator 属性.
- 标签处理
CodeMiror 陷阱聚焦于编辑区域. 这不是处理用户输入的可用方式 。 由于此元素会超越默认的标签键行为 并删除元素中的焦点.
- 所需进口
此版本对网页组件使用最新和最终的光谱. 这意味着组件作为ES模块工作. 因为这样 在向 DOM 插入此元素之前, 文件必须包含 CodeMiror 和相关库 . CodeMirror 6 可能与ES的进口合作,但目前还没有被固定在一块石头上.
以下为要添加到文档中的默认脚本集.
<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 -->
<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>
<link rel="stylesheet" href="node_modules/codemirror/addon/lint/lint.css" />
最后,如果您的应用程序会使用文档中没有包含的模式,您应该设置导入URI. 这将用来解决模式依赖性 .
<script>
CodeMirror.modeURL = 'node_modules/codemirror/mode/%N/%N.js';
</script>
API 组件
此组件是 API 生态系统组成部分
使用量
安装
npm install --save @advanced-rest-client/raw-payload-editor
在 html 文件内
<html>
<head>
<script type="module">
import '@advanced-rest-client/raw-payload-editor/raw-payload-editor.js';
</script>
</head>
<body>
<raw-payload-editor contenttype="application/json"></raw-payload-editor>
<script>
{
document.querySelector('raw-payload-editor').onvalue = (e) => {
console.log(e.target.value);
}
}
</script>
</body>
</html>
在一个LitElement中
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/code-mirror/code-mirror.js';
class SampleElement extends PolymerElement {
render() {
return html`
<code-mirror contenttype="application/json" @value-changed="${this._valueHandler}"></code-mirror>
`;
}
_valueHandler(e) {
this.value = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);
发展
git clone https://github.com/advanced-rest-client/raw-payload-editor
cd raw-payload-editor
npm install
本地运行演示
npm start
运行测试
npm test