ace-editor编辑json插件（HTML中的json排版）

ng2-ace-editor

To use Angular 4 install version 0.3.1 (npm i -S [email protected]).

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: `
 

 `
})
export class MyComponent {
   text:string = "";
}
Complete

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

@Component({
 template: `
 

 `
})
export class MyComponent {
   text:string = "";
   options:any = {maxLines: 1000, printMargin: false};
   
   onChange(code) {
       console.log("new code", code);
   }
}

Keywords

• angular5
• angular cli
• ace
• brace
• typescript
• directive
• component
• editor
• ng2-ace
• angular2-ace

使用简化解析

注意：在"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数据