Angular에서 Ace 편집기는 어떻게 설정합니까?

본문에서 나는 당신에게 어떻게 하는지 보여 드리겠습니다⚡ 빠른 설정✏️ Ace editor인치🅰️ Angular에는 타사 라이브러리가 없습니다.

✏️ Ace 편집기

Ace는 JavaScript로 작성된 내장 가능한 코드 편집기입니다.Sublime, Vim 및 TextMate와 같은 로컬 편집기의 기능과 성능과 일치합니다.모든 웹 페이지와 JavaScript 응용 프로그램에 쉽게 삽입할 수 있습니다.Ace는 Cloud9 IDE의 주요 편집자이며 모질라 스카이라이터(Bespin) 프로젝트의 후임자이다.
Cloud9 IDE과 Mozilla은 에이스를 적극적으로 개발하고 유지하고 있습니다.

👨‍💻 인코딩 얘기 좀 하자.

📁 작업공간 만들기

터미널을 열고 다음을 수행합니다.

npm i -g @angular/cli
ng new ace-angular --defaults --minimal

👉 Do not use --minimal option in production applications, it creates a workspace without any testing frameworks. You can read more about CLI options.

이 점에서 폴더 구조는 다음과 같아야 합니다.

⏬ Ace 편집기 설치

npm에서 사전 패키지 버전의 Ace를 설치합니다.

npm i ace-builds

🛠️ 편집기 설정

Angular에서ace 구축 패키지를 직접 사용하는 장점 중 하나는 Typescript에 대한 지원을 제공했다는 것이다.자신의 유형 정의 파일이 있는 repo을 볼 수 있습니다.

📄 응용 프로그램.구성 부분송전 시스템

파일의 모든 내용을 지우고 다음부터 시작합니다.

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

// 1️⃣
import * as ace from "ace-builds";

// 2️⃣
@Component({
  selector: "app-root",
  template: `
    <div
      class="app-ace-editor"
      #editor
      style="width: 500px;height: 250px;"
    ></div>
  `,
  styles: [
    `
      .app-ace-editor {
        border: 2px solid #f8f9fa;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
    `,
  ],
})
export class AppComponent implements AfterViewInit {

  // 3️⃣
  @ViewChild("editor") private editor: ElementRef<HTMLElement>;

  // 4️⃣
  ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");
    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("<h1>Ace Editor works great in Angular!</h1>");
  }
}

여기서 무슨 일이 일어났는지 봅시다.

우선, 우리는 ace 가방에서 ace-builds을 수입합니다.

그리고 HTML 템플릿을 설정하고 있습니다.height과 width은 필수입니다. 그렇지 않으면 편집기가 불러오지 않습니다.나는 스타일링도 추가했으니 네가 원한다면 뛰어넘어도 된다.

상술한 내용 이후, 우리는 @ViewChild을 사용하여 우리의 편집기를 조회합니다

i. @ViewChild의 조회 하위 레벨에 접근하려면 ngAfterViewInit의 생명주기 연결을 사용해야 합니다.뷰 조회는 ngAfterViewInit 리셋을 호출하기 전에 설정되어 있기 때문입니다.

2.편집기의 기본 글꼴 크기를 14px으로 설정하고 있습니다.Ace editor는 구성 옵션을 많이 제공합니다. here을 확인하십시오.
iii. 그리고 Ace 편집기를 #editor 요소에 추가합니다.
마지막으로 기본값을 설정하고 있습니다.Ace 편집기의 작업 설명서를 how-to guide에서 볼 수 있습니다.
출력 보기:

축하🎉🎉🎉. Ace 편집기 설정을 완료했습니다.👏👏👏.

🔭 더욱 사용하다

실제 장면에서 문법 강조 표시를 사용하고 편집기에서 값을 찾으려고 합니다.우리들에게 그것의 실제 효과를 좀 봅시다.

🌄 주제 및 구문 강조 표시 설정

응용 프로그램 내.구성 부분ts는 다음과 같이 변경합니다.

...
ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");
    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("<h1>Ace Editor works great in Angular!</h1>");

  // 🚨 Added
  aceEditor.setTheme('ace/theme/twilight');
  aceEditor.session.setMode('ace/mode/html');
  }

차갑다브라우저의 출력을 살펴보겠습니다.

보시다시피 강조 표시와 문법이 활성화되지 않았습니다.브라우저 콘솔에서 오류가 있는지 살펴보겠습니다.

오류 표시: 스크립트 src에서ace로 경로를 추정할 수 없습니다. ace를 사용하십시오.구성모드와 테마의 동적 불러오기를 사용하거나 웹 패키지를 사용하여ace/webpack 해상도를 사용합니다. 이것은 ace가 테마와 문법이 강조된 관련 파일을 찾을 수 없다는 것을 의미합니다.
봐라, 그들도 이미 오류 컨트롤러에서 해결 방안을 제시했다.사용: ace.config.set('basePath', 'path').기본적으로,ace는ace의 스크립트 노드를 찾아서 동적 불러오는 URL을 검사합니다.js.만약 에이스라면 이것은 작용하지 않는다.js는 단독 스크립트 표시를 불러오지 않았습니다. 이 경우 URL을 명확하게 설정해야 합니다.url은ace 노드를 포함하는 폴더를 가리켜야 합니다.
unpkg.com 감사합니다. 필요한 URL을 얻을 수 있습니다.

https://unpkg.com/[email protected]/src-noconflict

코드에서 업데이트하는 방법:

...
ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");

    // 🚨 Added
    ace.config.set('basePath', 'https://unpkg.com/[email protected]/src-noconflict');

    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("<h1>Ace Editor works great in Angular!</h1>");

    aceEditor.setTheme('ace/theme/twilight');
    aceEditor.session.setMode('ace/mode/html');
  }

출력 확인:

✍️ 편집기에서 값 가져오기

...
ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");
    ace.config.set(
      "basePath",
      "https://unpkg.com/[email protected]/src-noconflict"
    );
    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("<h1>Ace Editor works great in Angular!</h1>");
    aceEditor.setTheme("ace/theme/twilight");
    aceEditor.session.setMode("ace/mode/html");

    // 🚨 Added
    aceEditor.on("change", () => {
      console.log(aceEditor.getValue());
    });
  }

나는 코드에서 어떻게 가치를 얻는지 똑똑히 볼 수 있다고 생각한다😉. Ace 편집기에서 지원하는 모든 이벤트를 확인해야 합니다.Typescript 및 VS 코드 덕분에 편집할 때 볼 수 있습니다.

출력 보기:

자, 여기까지.👍
응용 프로그램의 최종 버전입니다.구성 부분ts는 다음과 같습니다.

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import * as ace from "ace-builds";

@Component({
  selector: "app-root",
  template: `
    <div
      class="app-ace-editor"
      #editor
      style="width: 500px;height: 250px;"
    ></div>
  `,
  styles: [
    `
      .app-ace-editor {
        border: 2px solid #f8f9fa;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
    `,
  ],
})
export class AppComponent implements AfterViewInit {
  @ViewChild("editor") private editor: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");
    ace.config.set(
      "basePath",
      "https://unpkg.com/[email protected]/src-noconflict"
    );
    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("<h1>Ace Editor works great in Angular!</h1>");
    aceEditor.setTheme("ace/theme/twilight");
    aceEditor.session.setMode("ace/mode/html");
    aceEditor.on("change", () => {
      console.log(aceEditor.getValue());
    });
  }
}

결론

Angular에서 Ace 편집기를 타사 라이브러리 없이 간단하게 사용하는 방법을 알아봤습니다.
코드는 Github repo에서 얻을 수 있습니다: shhdharmen/ace-angular

정말 감사합니다.

제 글을 읽어 주셔서 감사합니다.평론 부분에서 당신의 생각을 알려주세요.
나도 트위터에 인사하고 싶은 것처럼 얘기할 수 있어.👋.