Вопрос или проблема
Я только что начал работать на новой должности, где буду писать HTML-рассылки. Я хочу подарить удобство будущим членам команды, которые могут разделить задачу написания HTML-рассылок, корректно отображающихся во всех основных почтовых клиентах, включая MS Outlook 2016 для настольных ПК.
Я знаю о MailChimp. Наша команда в настоящее время использует InfusionSoft для маркетинговых писем. Я пользовался редакторами Litmus.com и Emailonacid.com. Я попробовал RED от CoffeeCup. Эти инструменты в сочетании с инструментами разработчика Google в Chrome охватывают почти все необходимые мне функции, кроме некоторых. Я продолжаю искать, потому что хочу чего-то большего, особенно когда речь идет о письмах, созданных для MS Outlook на настольных ПК. Функции, которые я хочу, вдохновлены Android Studio.
Основные, необходимые функции:
- Красные волнистые подчеркивания в коде, которые не поддерживаются в Outlook
- Подсказки, которые появляются, когда я навожу курсор на фрагменты кода с красными волнистыми линиями и дают мне советы по исправлению ошибок в коде.
Желательные функции:
- Переключение между “режимами клиентов электронной почты”. Когда я хочу проверить код на наличие ошибок в Outlook, я переключаюсь на Outlook, и красные волнистые линии и подсказки специфичны для Outlook. Когда я переключаюсь на Gmail, они становятся специфичными для Gmail.
- Обновляемые подсказки или обновляемые “режимы клиентов электронной почты”. Таким образом, по мере изменений, если выходит новая версия Outlook, мы обновляем режим Outlook, или можем добавить новый режим для новой версии Outlook.
- Встроенный инструмент для инлайнирования CSS. Таким образом, я могу писать чистый CSS в одном или нескольких файлах, по крайней мере, для начала. Затем я могу инлайнировать его нажатием кнопки, когда буду тестировать. Было бы классно, если бы я мог явно инлайнировать стили для дочерних элементов, которые бы их унаследовали.
Просто хочу, не знаю почему:
- Встроенный инструмент для удаления инлайнирования CSS, чтобы вернуть CSS обратно в атрибуты стилей и в файл .css.
Я изучал и создавал документы с информацией о том, какой код поддерживается/не поддерживается в Outlook. Я смогу создавать подсказки сам, если это необходимо. В основном я хочу эти функции, потому что, разве это не идеально для передачи документации моей команде? У них будет конкретное руководство в точном контексте, которому оно принадлежит.
Текущий поиск программного обеспечения: Как я уже говорил, большинство инструментов, которые я использовал, вполне подходят для моих нужд, особенно в комбинации друг с другом. Но они не хватает в перечисленных выше функциях. Мой поиск в настоящее время разделен на 3 направления.
- Поиск редактора, который имеет все функции, которые я хочу. LiveEditor, Litmus.com и Emailonacid.com были наиболее близкими к этому. Но я не нашел единого редактора, который бы соответствовал всем требованиям.
- Изучение расширяемых редакторов (emacs, Atom, IntelliJ, VisualStudio, Sublime и др.) в поиске плагинов, которые предоставили бы все нужные функции. IntelliJ с этим плагином Aspose выглядело как возможность, но я пока не совсем его понимаю, и я не готов покупать IntelliJ только для того, чтобы попробовать это.
- Изучение возможности создания собственных расширений, вероятно, для Atom, чтобы реализовать все функции, которые я хочу. Atom выглядит так, чтобы у него было меньше всего препятствий.
Таким образом, независимо от того, попадает ли ваш ответ в любую из этих 3 категорий, я бы его принял.
Редакторы CudaText/ SynWrite имеют базу для этого, для дополнения.
Дополнение должно включать
-
Лексер, модифицированный HTML-лексер, который находит некорректные части HTML и делает их красными или подчеркивает красным. SynWrite имеет учебные материалы по лексерам (4 файла) об этом.
-
Плагин для SynLint (Synwrite)/ CudaLint (CudaText). То есть линтер. Этот линтер должен ставить закладки на плохие строки. Он может добавлять закладки с подсказками – для иконок в левой боковой области. Плагин на Python.
Лексер + линтер могут это сделать.
Ответ или решение
Для создания редактора, который можно настроить для написания HTML-писем с особыми подсказками для Outlook, я рекомендую рассмотреть два подхода: использование существующих редакторов с возможностью настройки и создание собственных расширений.
1. Существующие редакторы
CudaText и SynWrite
Оба редактора предлагают отличные возможности для настройки через аддоны и плагины. Вот краткое описание необходимых компонентов:
-
Лексер: Вам понадобится модифицированный HTML-лексер, который сможет находить некорректные HTML-фрагменты и выделять их красным или подчеркиванием. SynWrite предлагает документацию по созданию лексеров, которая может помочь вам в этом процессе.
-
Линтер: Вам также понадобится плагин для SynLint (в SynWrite) или CudaLint (в CudaText). Этот линтер должен размещать закладки на неправильных строках кода. Он сможет добавлять закладки с подсказками, которые будут отображаться при наведении курсора. Написание плагина можно выполнить на языке Python.
2. Расширяемые редакторы
Если вам нужен более мощный и гибкий инструмент, обратите внимание на редакторы, такие как Visual Studio Code, Atom или IntelliJ. Например, в Visual Studio Code можно найти множество удобных расширений для HTML- и CSS-разработки.
- Создание собственных расширений: Если вы решите использовать редактор, например, Atom, вы можете создать свое собственное расширение, которое будет обеспечивать необходимые функции, такие как:
- Красное подчеркивание для неподдерживаемых свойств Outlook.
- Подсказки, которые появятся при наведении на выделенные участки кода.
- Тонкая настройка режимов (например, переключение между режимами для разных email-клиентов).
3. Разработка собственного инструмента
Если ни один из вышеперечисленных инструментов не отвечает всем вашим требованиям, возможно, стоит рассмотреть создание собственного инструмента, который будет предоставлять весь необходимый функционал интеграции HTML и CSS с встроенной поддержкой версий Outlook.
Заключение
Каждый из перечисленных подходов имеет свои плюсы и минусы, и то, что вы выберете, будет зависеть от ваших технических навыков и потребностей вашей команды. Исходя из желаемых функций, CudaText и SynWrite могут стать хорошей основой для вашего редактора с настройкой, а существующие редакторы (Visual Studio Code, Atom, или IntelliJ) могут предоставлять необходимые расширения и плагины. Разработка собственного расширения для Atom может стать наиболее гибким решением.
Поскольку вы уже ведете документацию по поддерживаемым свойствам HTML в Outlook, также может быть полезным интегрировать это управление в ваш инструментарий, чтобы ваши будущие коллеги имели доступ к конкретной информации прямо в контексте редактируемого кода.