Not Providing Milkshakes

    @nowzoo/ngx-ace
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.11 • Public • Published

    NgxAce

    A quick and dirty Angular wrapper for the Ace code editor. Works with or without Angular form models. Loads Ace scripts and themes from a CDN or other URL.

    Installation

    npm i --save @nowzoo/ngx-ace

    Quick Start

    Import the library into your app...

    import { NgxAceModule } from '@nowzoo/ngx-ace';
    // ...
    @NgModule({
      imports: [
        NgxAceModule.forRoot()
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Use the ngx-ace component...

    // my.component.ts
    export class MyComponent  {
      content = 'Hello World';
      editor: any;
      onEditorReady(editor) {
        // editor is an instance of Ace.Editor
        this.editor = editor;
        this.editor.setOptions({
          mode: 'ace/mode/markdown',
          theme: 'ace/theme/github'
        });
      }
    }
    <!-- my.component.html -->
    <div class="my-ace-wrapper">
      <ngx-ace [(ngModel)]="content" (ready)="onEditorReady($event)"></ngx-ace>
    </div>

    Important note about sizing...

    The ngx-ace component is styled with height: 100%; width: 100%. In order for the ace editor to show up you must wrap the component with an element with a height...

    .my-ace-wrapper {
      height: 400px;
      border: 1px solid #DDD;
    }

    API

    Interface IAceEditorOptions

    The native ace editor options. You can provide a defaults for these options as needed. See INgxAceOptions below.

    mode?: string; // use the full path 'ace/mode/php'
    theme?: string; // use the full path 'ace/mode/php'
    selectionStyle?: 'line' | 'text';
    highlightActiveLine?: boolean;
    highlightSelectedWord?: boolean;
    readOnly?: boolean;
    cursorStyle?: 'ace' | 'slim' | 'smooth' | 'wide';
    mergeUndoDeltas?: boolean | 'always';
    behavioursEnabled?: boolean;
    wrapBehavioursEnabled?: boolean;
    autoScrollEditorIntoView?: boolean;
    copyWithEmptySelection?: boolean;
    useSoftTabs?: boolean;
    navigateWithinSoftTabs?: boolean;
    enableMultiselect?: boolean;
    hScrollBarAlwaysVisible?: boolean;
    vScrollBarAlwaysVisible?: boolean;
    highlightGutterLine?: boolean;
    animatedScroll?: boolean;
    showInvisibles?: boolean;
    showPrintMargin?: boolean;
    printMarginColumn?: number;
    printMargin?: false | number;
    fadeFoldWidgets?: boolean;
    showFoldWidgets?: boolean;
    showLineNumbers?: boolean;
    showGutter?: boolean;
    displayIndentGuides?: boolean;
    fontSize?: number | string;
    fontFamily?: string;
    maxLines?: number;
    minLines?: number;
    scrollPastEnd?: number | boolean;
    fixedWidthGutter?: boolean;
    scrollSpeed?: number;
    dragDelay?:  number;
    dragEnabled?: boolean;
    focusTimeout?: number;
    tooltipFollowsMouse?: boolean;
    firstLineNumber?: number;
    overwrite?: boolean;
    newLineMode?: 'auto' | 'unix' | 'windows';
    useWorker?: boolean;
    tabSize?: number;
    wrap?: boolean|number;
    foldStyle?: 'markbegin' |'markbeginend' | 'manual';

    Interface INgxAceOptions

    An object containing the URL of the cdn (or other location) that you want to load Ace from, and default editor options. You can optionally provide a different set of options with

    // The URL from which Ace will be loaded.
    // Default: 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1'
    aceURL: string;
    defaultEditorOptions?: IAceEditorOptions;

    const NGX_ACE_OPTIONS

    The injection token for providing a custom INgxAceOptions. Example...

    import { NgxAceModule,  INgxAceOptions, NGX_ACE_OPTIONS} from '@nowzoo/ngx-ace';
    
    const aceOptions: INgxAceOptions = {
      aceURL: '/some/path/to/ace',
      defaultEditorOptions: {
        theme: 'ace/theme/chrome'
      }
    };
    @NgModule({
      imports: [
        NgxAceModule.forRoot()
      ],
      providers: [
        {provide: NGX_ACE_OPTIONS, useValue: aceOptions}
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Service NgxAceService

    A service that takes care of loading the main ace.js script and setting the path for modes and themes. You probably do not need to use this at all.

    Methods

    • loaded(): Promise<void> Returns a promise that resolves when ace has been loaded on the page.

    Component NgxAceComponent

    selector: 'ngx-ace' | exportAs: 'ngxAce'

    Inputs

    • mode: string Optional. Use only the language name, not the full path: markdown not ace/mode/markdown.
    • theme: string Optional. Use only the name of the theme: chrome, not ace/theme/chrome.

    Output

    • ready: EventEmitter<any> Emits the ace editor instance when ace.js has been loaded and the component's editor has been initialized.

    Development

    This project was generated with Angular CLI version 7.0.2.

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Code scaffolding

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

    Build

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Running end-to-end tests

    Run ng e2e to execute the end-to-end tests via Protractor.

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

    Install

    npm i @nowzoo/ngx-ace

    DownloadsWeekly Downloads

    0

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    30

    Last publish

    Collaborators

    • chriscarson