npm i ng2-ace-editor

app.module.ts

import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AceEditorModule } from 'ng2-ace-editor';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,AceEditorModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AceEditorModule } from 'ng2-ace-editor';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

@NgModule({

imports: [ BrowserModule, FormsModule,AceEditorModule ],

declarations: [ AppComponent, HelloComponent ],

bootstrap: [ AppComponent ],

schemas:[CUSTOM_ELEMENTS_SCHEMA]

})

export class AppModule { }

app.component.ts

import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core';
// import 'brace/theme/github';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, OnInit {
  name = 'Angular';
  str:any='';
  @ViewChild('editor',{static:true}) editor;
  ngOnInit() {
      this.str = `a+b\nc+d`;
      console.log();
  }
  ngAfterViewInit() {
    this.editor.getEditor().setOptions({
      showLineNumbers: true,
      tabSize: 2,
      readOnly:false,
      highlightActiveLine:true,
      useWorker: false
    });
    this.editor.mode = 'javascript';
    this.editor.theme ='vs',
    this.editor.value = this.getArrayTagsHtmlString(document.getElementById('code').innerHTML).join('\t\n\t');
     this.editor.getEditor().commands.addCommand({
      name: "showOtherCompletions",
      bindKey: "Ctrl-.",
      exec: function (editor) {

      }
    })
    // console.log(document.getElementById('code').outerHTML)
  }
  getArrayTagsHtmlString(str){
    let htmlSplit = str.split(">")
    let arrayElements = []
    let nodeElement =""
    htmlSplit.forEach((element)=>{  
      if (element.includes("<")) {
        nodeElement = element+">"   
       }else{
         nodeElement = element
        }
        arrayElements.push(nodeElement)
    })
    return arrayElements
  }
}

import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core';

// import 'brace/theme/github';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements AfterViewInit, OnInit {

name = 'Angular';

str:any='';

@ViewChild('editor',{static:true}) editor;

ngOnInit() {

this.str = `a+b\nc+d`;

console.log();

}

ngAfterViewInit() {

this.editor.getEditor().setOptions({

showLineNumbers: true,

tabSize: 2,

readOnly:false,

highlightActiveLine:true,

useWorker: false

});

this.editor.mode = 'javascript';

this.editor.theme ='vs',

this.editor.value = this.getArrayTagsHtmlString(document.getElementById('code').innerHTML).join('\t\n\t');

this.editor.getEditor().commands.addCommand({

name: "showOtherCompletions",

bindKey: "Ctrl-.",

exec: function (editor) {

}

})

// console.log(document.getElementById('code').outerHTML)

}

getArrayTagsHtmlString(str){

let htmlSplit = str.split(">")

let arrayElements = []

let nodeElement =""

htmlSplit.forEach((element)=>{

if (element.includes("<")) {

nodeElement = element+">"

}else{

nodeElement = element

}

arrayElements.push(nodeElement)

})

return arrayElements

}

app.component.html

<div id="code">
  <hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div style="cursor:none !important">
  <ace-editor style="height:600px;"  #editor>
</ace-editor>
</div>
</div>

<p>

Start editing to see some magic happen :)

</p>

<ace-editor style="height:600px;" #editor>

</ace-editor>

</div>

Angular Ace Code Editor Example to Integrate Ace Syntax Highlighter With Line Numbers in Browser

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives