Как реализовать 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
Указывает, будет ли включена автокапитализация на входе.
События :
"focus" (instance: CodeMirror, event: Event)
Срабатывает всякий раз, когда редактор находится в фокусе."blur" (instance: CodeMirror, event: Event)
Срабатывает всякий раз, когда редактор не сфокусирован."scroll" (instance: CodeMirror)
Срабатывает при прокрутке редактора."refresh" (instance: CodeMirror)
Срабатывает, когда редактор обновляется или меняется размер. В основном полезно для аннулирования кэшированных значений, которые зависят от редактора или размера символа."optionChange" (instance: CodeMirror, option: string)
Отправляется каждый раз при изменении параметра с помощьюsetOption
Пожалуйста, не забудьте похлопать, если статья оказалась полезной. Не стесняйтесь обращаться ко мне на других социальных платформах, таких как LinkedIn и github.
Если вы хотите больше блогов, связанных с Angular и JavaScript. следуйте за мной и комментируйте любые вопросы и предложения. Я вернусь с дополнительной информацией и темами, связанными с Angular и JavaScript и многим другим.😊