fxmontigny / ng2-ace-editor

Ace editor integration with typescript for angular 4 - 5
MIT License
199 stars 92 forks source link

Add emmet with ng2-ace-editor #105

Open dbedoyat opened 6 years ago

dbedoyat commented 6 years ago

I was trying to do this.

MonComponent.ts

`import { Component, OnInit, ViewChild} from '@angular/core'; import 'brace/index'; import * as ace from 'brace'; import 'brace/theme/monokai'; import 'brace/mode/html'; declare let ace: any;

@Component({ . . . }) export class MonComponent implements OnInit {

@ViewChild('editor') editor; constructor(private headerService: HeaderService) { }

ngOnInit() { this.editor.setOption("enableEmmet", true); }`

MaTemplate.ts

<ace-editor id="editor" [text]="content" style="min-height: 200px; width:100%; overflow: auto;" mode="html"></ace-editor>

IgorKurkov commented 5 years ago

@dbedoyat try to set import 'brace/ext/emmet'; inside polyfills.ts, but in general it not work and I had a lot of problems with brace/ace/whatever and set emmet by non-angular way

private _insertEmmetScriptTAG(): void {
    // load emmet code and snippets compiled for browser
    const node = document.createElement('script');
    node.src = 'https://cloud9ide.github.io/emmet-core/emmet.js'; 
    node.id = 'emmet-js';
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
  }

but not forget to delete the tag when onDestroy() smsg like this

onDestroy() {
  const emmetTag = document.getElementById('emmet-js');
  emmetTag && emmetTag.remove();
}

also you can load document from angular https://angular.io/api/common/DOCUMENT import {DOCUMENT} from '@angular/common';