angular ace编辑器
基于angular9、ace-builds构建的ace编辑器组件。demo地址
开始使用
安装成功后需要在项目中引入对应的ace
的模式、主题文件。比如:需要的时sql
语言:
修改angular.json
文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ace-test": {
...
"architect": {
"builder": {
....
"scripts": [
"./node_modules/ace-builds/src-min/ace.js", // ace 核心文件
"./node_modules/ace-builds/src-min/mode-sql.js", // sql 模式文件
"./node_modules/ace-builds/src-min/snippets/sql.js", // sql 模式部分文件
"./node_modules/ace-builds/src-min/theme-monokai.js" // 主题样式文件
]
}
}
}
}
}
项目引入
NgxAceModule
应该在AppModule
中使用或通用的module
模块中便于任何模块方便使用。
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { NgxAceModule } from 'ngx-ace-icy';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
NgxAceModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `
// 普通使用方式
<c-ngx-ace
[options]="aclOptions"
[text]="aceText"
(textChange)="textChange($event)"
></c-ngx-ace>
// ngModel 使用
<c-ngx-ace
[options]="aclOptions"
[(ngModel)]="aceText"
(ngModelChange)="textChange($event)"
></c-ngx-ace>
`
})
export class AppComponent implements OnInit {
public aclOptions = {
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
showGutter: false,
maxLines: 3,
minLines: 4,
autoScrollEditorIntoView: false,
};
public aceText = '';
constructor() { }
ngOnInit() {
}
public textChange(value): void {
console.log(value);
}
}
名称 |
说明 |
类型 |
必填 |
默认值 |
[options] |
ace 的配置信息.具体参考ace api |
object |
false |
- |
[placeholder] |
为空时的内容提示信息 |
string |
false |
请输入内容 |
[style] |
样式 |
object |
false |
- |
[readOnly] |
是否为只读 |
boolean |
false |
false |
[theme] |
使用主题,ace官网主题,也可自行开发主题。 |
string |
fasle |
monokai |
[mode] |
语言模式,ace官方模式,也可以自行开发。 |
string |
false |
sql |
[(text)] |
文本内容,可进行双向 绑定。非form 表单模式下可以使用。 |
string |
false |
- |
(textChange) |
text 文本更改后的回调。 |
EventEmitter<string> |
false |
- |
[(ngModel)] |
angular 表单属性。与[(text)] 互斥 |
string |
false |
- |
[ngModelChange] |
ngModel 内容更改后的回调 |
EventEmitter<string> |
false |
- |