Компонент текстового редактора JavaScript с номерами строк и указанием CR/LF?

Содержание

Вопрос или проблема
Ответ или решение
Основные задачи редактора
Выбор технологий
Завершение
SEO-оптимизация

Вопрос или проблема

Во многих текстовых редакторах есть номера строк и возможность визуального указания конца строки; например, в Scite вы можете выбрать Вид/Конец строки, и получите что-то вроде этого:

Как показывает изображение скриншота, Scite может корректно указывать на каждой строке, является ли конец строки CRLF (\r\n), LF (\n) или CR (\r).

Я хотел бы иметь такую же функциональность, но для JavaScript – что-то, что я мог бы использовать в качестве основы для дальнейшей разработки онлайн-редактора кода; основная функциональность заключается в следующем:

Показ номеров строк для текста (корректно, когда длинные строки оборачиваются редактором)
Текст и номера строк изначально отображаются моноширинным шрифтом (возможность изменения моноширинного шрифта приветствуется, но не обязательна)
Возможность визуально указывать конце строки CRLF (\r\n), LF (\n) или CR (\r);
Сохранение оригинальных концов строк, независимо от того, какие они, при копировании-вставке текста
Возможность реагировать с помощью обработчика на нажатие клавиши на клавиатуре и обрабатывать существующий текст на основе позиции курсора текста, прежде чем соответствующий символ клавиши будет фактически вставлен в текст

Я пытался найти несколько библиотек или компонентов онлайн, которые могут сделать все это из коробки, но не нашел много; например, я нашел https://quilljs.com/, но поскольку это редактор Rich Text, номера строк кажется сложными, я нашел только это обсуждение Можно ли показывать нумерацию строк рядом с редактором? · Проблема #2756 · slab/quill, которое, похоже, все еще не разрешено.

Итак, существует ли библиотека/компонент JavaScript, который имеет вышеупомянутые функции из коробки?

Ответ или решение

Создание текстового редактора на JavaScript с функционалом отображения номеров строк и индикацией символов конца строки (CR/LF) — задача, которая требует внимательного подхода к использованию существующих библиотек и компонент. В данной статье мы рассмотрим, как реализовать такой редактор, и какие технологии могут помочь достичь желаемого результата.

Основные задачи редактора

Отображение номеров строк: Редактор должен корректно показывать номера строк, даже если строки текста обернуты.
Шрифты: Использование моноширинного шрифта по умолчанию. Опция изменения шрифта будет преимуществом, но не является критически важной.
Индикация конца строки: Возможность визуально выделять различные типы символов конца строки: CR (\r), LF (\n) и CRLF (\r\n).
Сохранение оригинальных символов конца строки: При копировании и вставке текста редактор должен сохранять оригинальные символы конца строки.
Обработка клавиатурных событий: Реакция на нажатия клавиш с возможностью обработки текста в соответствии с положением курсора перед вставкой символа.

Выбор технологий

На сегодняшний день существует несколько библиотек для создания текстовых редакторов на JavaScript, которые могут помочь в реализации указанных функций:

CodeMirror: Это мощная библиотека, специально предназначенная для создания редакторов кода. Она поддерживает нумерацию строк, кастомизацию шрифтов и может быть настроена для выделения символов конца строки. CodeMirror также имеет возможность настройки событий клавиатуры, что делает её подходящей для вашей задачи.

Пример настройки CodeMirror для отображения символов конца строки:
```
const editor = CodeMirror(document.body, {
   lineNumbers: true,
   mode: "javascript",
   lineWrapping: true,
   gutters: ["CodeMirror-lint-markers", "breakpoints", "CodeMirror-lint-markers", "line-numbers"],
   extraKeys: {
       "Enter": function(cm) {
           // Ваша логика обработки
       }
   }
});
```
Monaco Editor: Это редактор, созданный для Visual Studio Code, обладающий широкими возможностями настройки. Он поддерживает нумерацию строк и может отображать различные символы завершения строки. Также позволяет работать с событиями клавиатуры.

Пример настройки Monaco Editor:
```
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
   const editor = monaco.editor.create(document.getElementById('container'), {
       value: ["function hello() {", "\tconsole.log('Hello world');", "}"].join("\n"),
       language: "javascript",
       lineNumbers: "on",
       wordWrap: "on"
   });
});
```
Ace Editor: Ещё одна популярная библиотека, которая также поддерживает нумерацию строк и гибкие настройки. Ace позволяет добавлять пользовательские функции, чтобы обрабатывать текстовые события.

Пример использования Ace Editor:
```
const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
editor.setOptions({
   showGutter: true,
   wrap: true,
});
```

Завершение

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

Постепенно вы сможете развивать функциональность вашего редактора, основываясь на уникальных характеристиках выбранной вами библиотеки. Успехов в разработке!

SEO-оптимизация

Для маркетингового увеличения видимости данной статьи рекомендуется использовать ключевые фразы, такие как "JavaScript редактор с номерами строк", "индикация конца строки в редакторах кода", "линейный редактор с поддержкой CR/LF", и предметные теги в комментариях и метатегах.