Как реализовать Code Mirror в Angular

Если вы создаете программную платформу, которая включает редактирование кода в браузере, CodeMirror — отличный инструмент для вас.

Что такое CodeMirror? Почему мы используем?

CodeMirror — универсальный текстовый редактор, реализованный на JavaScript для браузера. Он специализируется на редактировании кода и поставляется с рядом языковых режимов и аддонов, которые реализуют более продвинутые функции редактирования.

когда нам нужно отредактировать содержимое нашего файла в браузере. затем мы откроем файлы в редакторе кода браузера для редактирования и изменения.

CodeMirror поддерживает несколько тем, языков и конфигураций из коробки! Черт! Вы также можете предоставить пользовательские темы и языковую поддержку!

Здесь мы начинаем внедрять CodeMirror в наш угловой проект и легко учимся настраивать CodeMirror в соответствии с нашими требованиями.

установите этот пакет с помощью npm cmd: - npm install codemirror

после выполнения этой команды необходимо установить все необходимые файлы и добавить CodeMirror в ваши собственные веб-приложения! Все установленные файлы находятся в каталоге node_modules/codemirror!

Настройка установки:

мы добавляем важные файлы зеркала кода в angular.json. он предоставляет больше тем и поддерживает более 100 языков. и здесь мы добавляем только пользовательские файлы css и js в соответствии с нашим использованием и требованиями.

Зеркало кода реализации:

В HTML-коде нашего компонента, где бы мы ни хотели разместить редактор, вставьте элемент ‹textarea› и настройте CodeMirror в ts-файле компонента.

ниже я предоставляю код файла html, css и ts, который я публикую в своем репозитории github:

теперь ваш редактор CodeMirror должен быть готов и выглядеть так:

Пользовательская конфигурация CodeMirror:

1. value: string|CodeMirror.DocНачальное значение редактора. Может быть строкой или объектом документа.

2.theme: stringТема для оформления редактора. Вы должны убедиться, что файл CSS, определяющий соответствующие .cm-s-[name] стили, загружен (см. каталог theme в дистрибутиве). По умолчанию используется "default", для которого цвета включены в codemirror.css.

3.lineWrapping: booleanДолжен ли CodeMirror прокручивать или переносить длинные строки. По умолчанию false (прокрутка).

4.lineNumbers: booleanПоказывать ли номера строк слева от редактора.

5.scrollbarStyle: stringВыбирает реализацию полосы прокрутки. Значение по умолчанию — "native", показывая собственные полосы прокрутки.

6.extraKeys: objectМожет использоваться для указания дополнительных привязок клавиш для редактора, помимо тех, которые определены keyMap. Должен быть либо нулевым, либо допустимым значением карты ключей.

7.readOnly: boolean|stringЭто отключает редактирование содержимого редактора пользователем. Если задано специальное значение "nocursor" (вместо простого true), фокусировка редактора также запрещена.

8.spellcheck: booleanУказывает, будет ли включена проверка орфографии на входе.

9.autocorrect: booleanУказывает, будет ли включена автокоррекция для ввода.

10. autocapitalize: booleanУказывает, будет ли включена автокапитализация на входе.

События :

  1. "focus" (instance: CodeMirror, event: Event)Срабатывает всякий раз, когда редактор находится в фокусе.
  2. "blur" (instance: CodeMirror, event: Event)Срабатывает всякий раз, когда редактор не сфокусирован.
  3. "scroll" (instance: CodeMirror)Срабатывает при прокрутке редактора.
  4. "refresh" (instance: CodeMirror)Срабатывает, когда редактор обновляется или меняется размер. В основном полезно для аннулирования кэшированных значений, которые зависят от редактора или размера символа.
  5. "optionChange" (instance: CodeMirror, option: string)Отправляется каждый раз при изменении параметра с помощью setOption

Пожалуйста, не забудьте похлопать, если статья оказалась полезной. Не стесняйтесь обращаться ко мне на других социальных платформах, таких как LinkedIn и github.

Если вы хотите больше блогов, связанных с Angular и JavaScript. следуйте за мной и комментируйте любые вопросы и предложения. Я вернусь с дополнительной информацией и темами, связанными с Angular и JavaScript и многим другим.😊