ace-editor编辑json插件(HTML中的json排版)

ng2-ace-editor

To use Angular 4 install version 0.3.1 (npm i -S ng2-ace-editor@0.3.1).

Install

npm i -S ng2-ace-editor or yarn add ng2-ace-editor

Load the module for your app:

import { AceEditorModule } from 'ng2-ace-editor';

@NgModule({

  ...

  imports: [

    ...

    AceEditorModule

  ]

})

Use Component

Use directive
Minimal

import { Component } from '@angular/core';

@Component({
 template: `
 <div ace-editor
      [(text)]="text" // possible two way binding (thx ChrisProlls)
      ></div>
 `
})
export class MyComponent {
   text:string = "";
}
Complete

import { Component } from '@angular/core';

@Component({
 template: `
 <div ace-editor
      [(text)]="text" // possible two way binding (thx ChrisProlls)
      [mode]="'sql'" //string or object (thx ckiffel)
      [theme]="'eclipse'"
      [options]="options"
      [readOnly]="false"
      [autoUpdateContent]="true" //change content when [text] change
      [durationBeforeCallback]="1000" //wait 1s before callback 'textChanged' sends new value
      (textChanged)="onChange($event)"
      style="min-height: 200px; width:100%; overflow: auto;"></div>
 `
})
export class MyComponent {
   text:string = "";
   options:any = {maxLines: 1000, printMargin: false};
   
   onChange(code) {
       console.log("new code", code);
   }
}

Keywords

使用简化解析

注意:在"projects"下的"front":下"architect":下"build":的"options":中添加以下引用
"scripts": [
                            "./node_modules/ace-builds/src-min/ace.js",
                            "./node_modules/ace-builds/src-min/theme-eclipse.js",
                            "./node_modules/ace-builds/src-min/mode-yaml.js"
                        ]

使用步骤:
1.yarn或npm下载ace
2.HTML中写入对应div代码(对应参数根据自己需要书写,比如model类型可以使yaml等)
3.ts中引入对用参数。text是你的json数据

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。