ngx-ace-icy
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

angular ace编辑器

基于angular9、ace-builds构建的ace编辑器组件。demo地址

开始使用

安装

npm i ngx-ace-icy

使用

安装成功后需要在项目中引入对应的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模块中便于任何模块方便使用。

/**
 * 以AppModule引入为例
 */
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 { }
/**
 * AppComponent
 */
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 {
  /** ace 配置 **/
  public aclOptions = {
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    showGutter: false,
    maxLines: 3,
    minLines: 4,
    autoScrollEditorIntoView: false,
  };
    /** ace 内容 **/
  public aceText = '';
  constructor() { }
 
  ngOnInit() {
  }
    /** ace 内容更改的回调函数 */
  public textChange(value): void {
    console.log(value);
  }
}

Api说明

名称 说明 类型 必填 默认值
[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 -

Package Sidebar

Install

npm i ngx-ace-icy

Weekly Downloads

4

Version

1.0.0

License

MIT

Unpacked Size

178 kB

Total Files

23

Last publish

Collaborators

  • iecy