代码镜像网络组件

这是CodeMirror图书馆的包装纸. 现已调整为在影子DOM内工作. 该组件被高级REST客户端和API Console所使用.

所需进口

在向 DOM 插入此元素之前, 文件必须包含 CodeMirror 库 . 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>

访问选项

该元素暴露 setOption() 函数,用于直接设置编辑器选项.

cm.setOption('extraKeys', {
 'Ctrl-Space': (cm) => {
   CodeMirror.showHint(cm, CodeMirror.hint['http-headers'], {
     container: containerRef
   });
 }
});

此外,该要素有: editor 指代代码Merror实例的属性.

渲染隐藏元素

如果该元素是活动但无法显示, 您可能需要调用 refresh() 函数在 CodeMiror 实例上 显示元素后.

parent.style.display = 'block';
cm.editor.refresh();

样式

见 codemirror-styles.js cSS 变量定义的文件.

使用量

安装

npm install --save @advanced-rest-client/code-mirror

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/code-mirror/code-mirror.js';
    </script>
  </head>
  <body>
    <code-mirror mode="javascript">
      function myScript() {
        return 100;
      }
    </code-mirror>
  </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 @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/code-mirror
cd code-mirror
npm install

本地运行演示

npm start

运行测试

npm test