Рубрики
Без рубрики

Как настроить редактор ACE в Angular?

В этой статье я покажу вам, как быстро настроить ✏ редактор ACE в 🅰 Angular без каких -либо других сторонних библиотек. Tagged с помощью углового редактора ACE, JavaScript, TypeScript.

В этой статье я покажу вам, как быстро настроить ✏ ACE Editor в 🅰 Угловая без каких -либо других сторонних библиотек.

✏ Редактор ACE

ACE – это встроенный редактор кода, написанный в JavaScript. Он соответствует функциям и производительности местных редакторов, таких как Sublime, Vim и Textmate. Он может быть легко встроен в любую веб -страницу и приложение JavaScript. ACE поддерживается в качестве основного редактора для Облако 9 Ide и является преемником проекта Mozilla Skywriter (Bespin).

Оба Облако 9 Ide и Мозилла активно развивают и поддерживают ACE.

👨‍💻 Давайте поговорим о кодировании

📁 Создать рабочее пространство

Откройте свой терминал и:

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

👉 Не используйте -Минимал Вариант в производственных приложениях, он создает рабочее пространство без каких -либо структур тестирования. Вы можете прочитать больше о Параметры CLI Анкет

На этом этапе ваша структура папок должна выглядеть так, и она будет такой же до конца:

⏬ Установите редактор ACE

Мы установим предварительно упакованную версию Ace от npm :

npm i ace-builds

🛠 Редактор настроек

Одно преимущество использования Ace-Builds Пакет непосредственно в угловом, что они уже обеспечивают поддержку TypeScript. Вы можете проверить их Репо , у них есть файлы определений типа на месте:

📄 app.component.ts

Очистите все содержимое файла и начните с ниже:

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

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

// 2️⃣
@Component({
  selector: "app-root",
  template: `
    

  `,
  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;

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

Посмотрим, что здесь происходит:

  1. Во -первых, мы импортируем туз от Ace-Builds упаковка.
  2. Затем мы устанавливаем шаблон HTML. Обратите внимание, что высота и ширина требуются, в противном случае редактор не загружается. Я также добавил стиль, вы можете пропустить это, если хотите.
  3. После вышеуказанного мы запрашиваем наш редактор, используя @ViewChild
  4. я. Чтобы получить доступ к запросу ребенка @ViewChild , нам нужно использовать ngafterviewinit жизненный крюк. Поскольку запросы просмотра установлены до того, как будет вызван обратный вызов ngafterViewInit.

II Мы устанавливаем по умолчанию шрифт-размер редактора в 14px Анкет Есть много вариантов конфигурации, которые предоставляет ACE Editor, проверьте их здесь

iii. Затем мы прикрепляем редактор ACE к нашему #editor элемент.

iv И, наконец, мы настраиваем значение по умолчанию. Вы можете проверить, как редактор ACE в его Как рекомендовать Анкет

Давайте посмотрим на вывод:

Поздравляю 🎉🎉 🎉. Вы завершили настройку редактора ACE. 👏👏👏.

🔭 дальнейшее использование

В реальных сценариях вы также хотели бы включить синтаксис, выделяя и получить значение от редактора. Давайте посмотрим на это в действии.

🌄 Установить тему и синтаксис.

В app.component.ts Сделайте ниже изменения:

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

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

Прохладный. Посмотрим на вывод в браузере:

Как вы можете видеть, выделение и синтаксис не включены. Посмотрим, есть ли ошибка в консоли браузера:

Ошибка говорит: Невозможно вывести путь к ACE из Script SRC, используйте ace.config.set (‘basepath’, ‘path’), чтобы включить динамическую загрузку режимов и тем или с Webpack Использовать Ace/Webpack-Resolver , что означает, что ACE не может найти соответствующие файлы для тем и синтаксиса.

Видите ли, они уже дали решение и в консоли ошибок. То есть использовать: ace.config.set ('basepath', 'path') Анкет По умолчанию ACE обнаруживает URL -адрес для динамической загрузки, обнаружив узел сценария для Ace.js. Это не работает, если Ace.js не загружен отдельной тегом скрипта, и в этом случае он должен быть явно установить URL. И URL должен указывать на папку, которая содержит узлы ACE.

Спасибо unpkg.com , мы можем получить необходимый URL:

https://unpkg.com/ace-builds@1.4.12/src-noconflict

Давайте обновим это в нашем коде:

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

    // 🚨 Added
    ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');

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

    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/ace-builds@1.4.12/src-noconflict"
    );
    const aceEditor = ace.edit(this.editor.nativeElement);
    aceEditor.session.setValue("
Ace Editor works great in Angular!
");
    aceEditor.setTheme("ace/theme/twilight");
    aceEditor.session.setMode("ace/mode/html");

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

Я думаю, что из кода ясно, как получить ценность 😉. Вы должны проверить все события, поддерживаемые ACE Editor. Благодаря TypeScript и VS -коду, вы можете увидеть его при редактировании:

Посмотрим на вывод:

Круто, с этим мы закончили 👍

Окончательная версия app.component.ts Похоже, ниже:

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

@Component({
  selector: "app-root",
  template: `
    

  `,
  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;

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

Вывод

Мы увидели, как мы можем просто использовать редактор ACE в Angular без какого -либо стороннего использования библиотеки.

Код доступен в Github Repo: Shhdharmen/Ace-Angular

Благодарю вас

Для чтения моей статьи. Дайте мне знать ваши мысли в разделе комментариев.

Я также доступен в Твиттере как @shhdharmen Если вы хотите сказать привет 👋.

Оригинал: “https://dev.to/shhdharmen/how-to-setup-ace-editor-in-angular-11b9”

Читайте ещё по теме: