Текстовый редактор на javascript

Текстовый редактор на javascript

  • Переводы , 7 февраля 2019 в 14:35
  • Евгений Туренко

В программной экосистеме JavaScript существует множество инструментов. В этой статье вам будут представлены наиболее удобные с точки зрения автора инструменты работы с JavaScript.

Инструменты сборки и автоматизации

  • Webpack — представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты). Подробнее с использованием Webpack в своих проектах вы можете ознакомиться в нашей статье.
  • Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
  • Gulp — не очередной диспетчер запуска задач, а инструмент с интересным подходом: он определяет задачи в JavaScript как функции, также GUl автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), также он обеспечивает лучшую прозрачность и контроль над процессом.
  • Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
  • Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
  • Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.

IDE и редакторы кода

  • WebStorm — мощная IDE для продвинутой разработки веб-приложений на JavaScript. Она предлагает поддержку различных фреймворков и языков разметки. WebStorm может быть легко интегрирован с дополнительными инструментами вроде тестеров, средств контроля качества кода, сборщиков и т. д. В IDE также встроены такие функции, как автоматическое завершение кода, немедленное обнаружение ошибок, навигация, встроенный терминал, богатый набор плагинов и многое другое.
  • Atom — бесплатный продукт от GitHub и выбор №1 для многих разработчиков. Он представляет собой легко настраиваемый редактор кода, который поставляется с некоторыми интересными функциями «прямо из коробки». В Atom имеется встроенный менеджер пакетов, интеллектуальное автоматическое завершение кода и прочие полезные функции. Также Atom является кроссплатформенным редактором кода.
  • Visual Studio Code — поддерживается компанией Microsoft и полностью поддерживает TypeScript «прямо из коробки». В Visual Studio Code есть интеллектуальное завершение кода и подсветка синтаксиса с помощью технологии автодополнения IntelliSense, также есть встроенный инструмент отладки, встроенная поддержка команд Git, контроль версий и многое другое. Более того, вы можете расширить функциональность редактора путём подключения широкого спектра расширений.
  • Brackets — это лёгкий редактор кода с открытым исходным кодом. В основном он ориентирован на визуальные инструменты и поддержку процессора для упрощения работы в браузере. Brackets поставляется с удобной функцией предварительного просмотра в реальном времени.

Инструменты документирования кода

Документирование кода превращает ваше приложение в «стеклянную коробку», показывая, как работает тот или иной фрагмент кода. Инструменты автоматического документирования кода описывают функции и их назначения, что позволяет экономить время на анализе и понимании кода в будущем.

  • Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языконезависимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
  • JSDoc — набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.) из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
  • jGrouseDoc (jGD) — это гибкий инструмент с открытым исходным кодом, который позволяет разработчикам генерировать API из комментариев из исходного кода на JavaScript. jGD документирует не только переменные и функции, но и пространства имён, интерфейсы, пакеты и некоторые другие элементы.
  • YUIDoc — приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
  • Docco — бесплатный инструмент для документации, написанный на «литературном» CoffeeScript. Он создаёт HTML-документ для отображения ваших комментариев, чередующихся с кодом. Следует отметить, что инструмент поддерживает не только JavaScript, но и другие языки. Например, Python, Ruby, Clojure и прочие.

Инструменты тестирования

Инструменты тестирования для JavaScript созданы для обнаружения ошибок на этапе разработки, чтобы избежать в будущем ошибок у пользователей. С ростом сложности пользовательских приложений автоматические тесты не только повышают производительность приложения, но и помогают компаниям сохранить бюджет.

  • Jasmine — BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода Python и Ruby.
  • Mocha — это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
  • PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
  • Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.
Читайте также:  Горячие клавиши для вызова панели управления

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

  • JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
  • Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
  • ng-inspector — кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
  • Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.

Инструменты безопасности

  • Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
  • Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
  • RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
  • Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
  • OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.

Инструменты аналитики и оптимизации кода

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

В настоящее время в современном программном обеспечении объединяются инструменты анализа статического кода во время разработки, чтобы исключить попадание некачественного кода в продакшен.

  • JSLint — это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
  • JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint — форк от JSLint. Основная цель этого инструмента статического анализа кода — помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint — форк от JSLint.
  • ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на Node.js, инструмент предлагает оперативную среду выполнения и плавную установку через npm.
  • Flow — статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы — параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.

Инструменты управления версиями

  • В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется распределённой системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
  • Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.

Инструменты управления пакетами и зависимостями

  • Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
  • Npm — диспетчер пакетов Node.js. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире.
  • Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent. Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
  • Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс. Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и безболезненно.
Читайте также:  Какие языки программирования должен знать программист

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

CodeX крутые ребята, которые базируются в Университете ИТМО. На базе этого университета студенты и выпускники создают интересные и полезные проекты: Hawk.so, Capella, AR-tester и другие.

Один проект очень помог нашему бизнесу. Редактор Editor.js сохраняющий исходный код в JSON.

Главной преимущество редактора это хранение и представление данных в JSON формате. Особенно поймут те у кого есть и веб-версия продукта и мобильное приложение. Для написание статей контент менеджеры любят использовать WYSIWYG-редактор, но после этого получаем «спагетти»:

«Спагетти» просто убивали всю верстку и интегрировать их в мобильные приложения было просто болью. Приходилось отдельно писать статью под веб-версию и мобильное приложение. Это долго и тяжело поддерживать.

Компромиссом является формат JSON. Он простой, имеет строгую структуру и гибкий. В админ панель добавляем Editor.js редактор, пишем контент и сохраняем его как JSON. По API отправляем мобильному приложению JSON и оформляем уже дальше его как нужно, а на веб-версию JSON конвертируем в HTML через Editor.js. И всем счастье.

Ребята предоставляют API для создании своих плагинов. На сайте хорошая документация с примерами. Используйте!

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

  • Скопировать ссылку
  • Facebook
  • Twitter
  • ВКонтакте
  • Telegram
  • Pocket

Похожие публикации

  • 21 февраля 2020 в 10:00

Unity Analyzers теперь Open-Source

Исследование RedHat: open source вытесняет проприетарное ПО из корпоративного сегмента

Open Source Guides: Запуск проекта с открытым исходником

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 29

Извините, но самое сложное в markdown — помечать заголовки символами "#"… Разве обучить менеджера markdown сложнее, чем написать текстовый блочный редактор со встроенным html-конвертером?

Ну, первое, что гуглится — какой-то Martor, его вполне должно хватить, судя по фичам. А какие Вы хотите плагины?

Опыта именно с этим редактором нет, насчет плагинов не знаю. Какие именно плагины вы хотите?

Markdown — это же просто соглашение о том, как писать текст. По этим соглашениям можно описать в простом тексте форматирование (жирный, курсив), абзацы, заголовки, списки (нумерованные и ненумерованные), картинки, простые таблицы. Вам необходимо использовать еще что-то кроме этого?

Ну если вы не знаете за плагины, то зачем вы пишите людям как нужно делать?

Нам нужно интегрировать glvrd.ru как нам его впихнуть в ваш Martor?

А вот в Editor.js мы его интегрировали за 30 минут. Понимаете?

Поспешили вы с вопросом, а можно было уделить пару минут и посмотреть на исходники. Расширяется через extensions, которых с данным редактором идет 5 штук, вполне наглядный код. Да и подключаются в соответствующей секции в settings.py.

Но, как говорится, на вкус и цвет все фломастеры разные… лично мне ближе markdown, другим подойдет json формат 🙂

И много преимуществ Вы получаете от того, что в базе текст статьи хранится как json, а не как текст?

Когда в мобильном приложении рендерю данные я должен по строчно понимать, что это за формат и какой там текст внутри. Типа:

Или например список:

React native получает объект и с ним работает, как мне получить такой объект в переменную в react native?

Так есть WYSIWYG Markdown редакторы, в которых синтаксис знать не обязательно. Например, онлайновый StackEdit и оффлайновая https://typora.io/.

А как её написать в любом другом формате? По идее, вставить соответствующий блок, внешний по отношению к формату. Или где-то это есть "из коробки"?

Описать в JSON нет проблем

Все блочные редакторы на contenteditable, которые мне удалось нагуглить (включая и Editor.js), страдают от одной и той же проблемы: выделение текста ограничено одним блоком. То есть, если вы нажмете левую кнопку мыши в середине одного параграфа и переместите указатель мыши на середину следующего параграфа, чтобы выделить несколько предложений, то выделение текста остановится на конце первого параграфа. Да, в Editor.js есть еще и «прямоугольный» режим, который позволяет вам выбрать все блоки, попадающие в указанную мышью прямоугольную область, но во-первых, это не совсем типичное поведение для текстового редактора (пресловутый контент-менеджер, привыкший работать в Microsoft Word, может и не догадаться, что так можно), а во-вторых, выделяется либо сразу весь блок, либо ничего — часть блока таким образом не выделить. Ну и плюс с клавиатуры такое не сделать, только мышью.

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

Читайте также:  Черно белый рисунок для печати

Не совсем понял, как это могло бы помочь. Или вы предлагаете переключиться в режим просмотра, выделить текст, переключиться обратно, и чтобы выделение сохранилось? Мне кажется, так сделать не получится, потому что смежные параграфы реализованы отдельными contenteditable-блоками. Представьте, что каждый параграф — это отдельный textarea, просто без рамок. Очевидно, что нельзя начать выделять текст в одном textarea и продолжить выделение в следующем.

Вообще в стандартных контролах для редактирования текста (как в браузере, так и в десктопных приложениях) существует много "мелочей", которые, как мне кажется, большинством людей воспринимается как данность, доступная повсеместно из коробки или же легко реализуемая. Помню, как в самом начале моей карьеры тимлид поручил мне "набросать по-быстрому простой WYSIWYG-редактор" для десктопного приложения, которое мы разрабатывали. Все нужно было отрисовать на Windows GDI: рамку, курсор, скроллбар, выделение, ну и, конечно, отрендерить сам текст. К счастью, никаких картинок или таблиц. По оценке тимлида у него бы на это ушло два дня, но поскольку я был тогда джуниор, то мне он щедро выделил аж целых четыре дня. У меня на все это ушло три недели с дикими овертаймами. (К концу разработки мне уже в буквальном смысле снились кошмары про то, что я забыл учесть кернинг при расчете ширины текста.) Еще через неделю, после того, как это ушло в продакшн, пользователи прислали нам несколько десятков багрепортов вида: «А что это я тут нажимаю Shift+Ctrl+End (выделить от курсора до конца текста), а оно не работает?» Еще через две недели, потраченные на то, чтобы попытаться все это реализовать, тимлид плюнул и решил заменить наш контрол на стандартный RichTextBox. Пусть он корявый и ущербный (например, выравнивание текста по ширине, которое так хотел тимлид, в нем не поддерживается), но зато все "мелочи" в нем, в отличие от нашего велосипеда, реализованы на 100%.

В вебе ситуация еще более плачевная, поскольку к итак уже непростой задаче добавляются еще и ограничения браузера (если, конечно, вы не на канвасе все вручную рисуете — но тогда вам остается только посочувствовать). Есть прекрасный блог Content Uneditable от разработчиков CKEditor и вводная статья ContentEditable — The Good, the Bad and the Ugly, которая наглядно показывает масштаб проблемы, с которой сталкиваются начинающие разработчики, которые решили разработать свой онлайн-редактор и еще не подозревают, сколько "мелочей" им придется реализовать самостоятельно. Проиллюстрирую на примере Editor.js. Возьмем несколько абзацев текста, кликнем в середину первого абзаца и несколько раз нажмем кнопку "вниз" на клавиатуре. Сначала посмотрим, как это работает в "обычных" текстовых редакторах (Microsoft Word в качестве примера):

Обратите внимание, как Word старается, по возможности, точно сохранить горизонтальную позицию курсора при переходе между строками и абзацами.

Теперь тот же самый эксперимент на главной странице Editor.js:

Можно заметить, что при переходе между смежными абзацами позиция курсора теряется. (Плюс еще в конце каждого абзаца курсор сначала прыгает в конец строки перед переходом к следующему абзацу — ожидаемое поведение, если вспомнить, что каждый абзац ведет себя как отдельная textarea.) Можно возразить, что это мелочи — подумаешь, придется лишний раз кликнуть мышью — но из таких мелочей и складывается тот самый "user experience". Представьте себе контент-менеджера, годами пользовавшегося редакторами, которые ведут себя подобно Microsoft Word. У него все эти "мелочи" уже чуть ли ни на уровне мышечной памяти, поэтому процесс привыкания к поведению нового редактора у него будет выглядеть как-то так: нажал что-то на автомате -> получил неожиданный результат -> удивился -> вспомнил, что тут все не так -> в очередной раз проклял разработчиков -> исправил и продолжил работу до возникновения следующей проблемы. В результате он либо все-таки переучится, ценой потраченных нервов, либо плюнет на все и будет набирать текст в Word, а затем копировать результат в онлайн-редактор.

Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.

Текст редактируется в div с атрибутом contenteditable , без создания iframe и textarea. У него нет стандартного тулбара и стилей — их можно создавать средствами Bootstrap. Команды редактирования привязываются к кнопкам с помощью атрибута data-edit . Вот пример фрагмента тулбара, управляющего начертанием текста:

Клавиатурные сокращения можно задавать через объект hotKeys:

Собственно, это почти всё. Ещё несколько нюансов работы с редактором описаны на демо-страничке с инструкцией и в репозитории проекта.

Этот редактор возник в ходе работы над проектом MindMup — веб-приложением для создания ассоциативных карт. Разработчикам был нужен простой редактор контента, но существующие варианты их не устраивали — они тянули за собой кучу кода для поддержки старых браузеров и встроенные тулбары, неудобные схемы работы через фреймы и скрытые текстовые поля, плохо работали на мобильных устройствах с тач-интерфейсом и конфликтовали с Bootstrap. Используя возможности HTML5, jQuery и Bootstrap, удалось уместить необходимый минимум функционала менее чем в двести строк кода.

После публикации кода на Гитхабе оказалось, что именно такого современного и лёгкого редактора всем очень недоставало — за две недели набралось почти две тысячи подписчиков.

Редактор распространяется под лицензией MIT.

Ссылка на основную публикацию
Adblock detector