Вопрос или проблема
Я пытаюсь создать систему, которая позволит пользователям генерировать текстовый шаблон, в который могут быть встроены конкретные, заранее определенные токены, доступные через браузер. (Представьте себе систему слияния почты, где документ состоит полностью из 2 вещей: статического текста и токенов, представляющих значение из базы данных.)
Я хотел бы иметь возможность вставить его на HTML-страницу, как обычный элемент текстового поля, за исключением того, что токены представляют собой нечто отличное от текста; они являются своим собственным типом элемента, встроенным в печатный текст, и не могут быть отредактированы или частично выделены, как текст, а только удалены, скопированы, вырезаны или вставлены как атомарный элемент. Должен быть какой-то способ для редактора получить список допустимых значений токенов с сервера, когда страница загружается, и интуитивный способ для пользователя ввести новый токен в позиции курсора.
Я знаю, что раньше видел что-то подобное в интернете, но поиск в Google не дает никаких полезных результатов. Я нахожу библиотеки для редактирования кода с подсветкой синтаксиса или библиотеки для WYSIWYG редактирования HTML, но ни одна из них не является тем, что я на самом деле ищу.
Кто-нибудь знает, где я мог бы найти такой компонент?
У меня было такое же требование, и пока я нашел пару вариантов:
Ни один из них не идеален. Tokchi, похоже, несколько устарел (например, нет поддержки npm / bower), а Textcomplete позволяет вам выбирать из выпадающего списка, но на самом деле не отображает вставленный текст в стиле токенов (насколько я могу судить).
Это, похоже, просто нечто подобное тому, как работают BB-код и смайлы на большинстве форумов. Магия происходит на серверной стороне, когда ввод, сгенерированный пользователем, выводится обратно и токены заменяются значениями из базы данных. Почти всегда это делается с помощью серверного программирования, а не клиентского JavaScript и т. д.
Любые из найденных вами WYSIWYG-редакторов, которые позволяют настраивать меню, подойдут — просто настроьте пользовательское меню “токены”, в котором будет ваш заранее определенный список возможных вставок.
Ответ или решение
Ищете редактор текста в браузере с учетом встроенных токенов? Ваша задача заключается в создании системы, которая позволит пользователям генерировать текстовые шаблоны, включающие предопределенные токены. Это может быть схоже с системой объединения почты, где документ состоит из статического текста и токенов, представляющих значения из базы данных. Ниже представлены рекомендации по выбору подходящего инструмента, который может удовлетворить ваши требования.
Основные требования к текстовому редактору
-
Токены как отдельные элементы: Необходимо, чтобы токены были отдельными элементами в документе и не могли редактироваться так же, как обычный текст. Пользователи должны иметь возможность только удалять, копировать, вырезать или вставлять токены как атомарные элементы.
-
Интеграция с HTML: Editor должен быть легко интегрирован на веб-странице, как стандартный элемент текстового поля.
-
Динамическая подгрузка токенов: При загрузке страницы редактор должен получать список допустимых токенов с сервера для их последующего использования.
-
Интуитивный ввод токенов: Пользователи должны иметь возможность легко добавлять токены в тексте, используя позицию курсора.
Возможные решения
В вашем запросе уже упоминались два инструмента — Tokchi и Textcomplete. Оценим их возможности и ограничения.
-
Tokchi: Этот инструмент представляет собой легкий редактор текста, который поддерживает инлайновые элементы, однако, на данный момент он может быть устаревшим, так как отсутствует поддержка npm и bower. Но стоит отметить, что Tokchi может быть хорошей основой для дальнейшей разработки, если у вас есть веб-опыт и время для настройки.
-
Textcomplete: Он предлагает удобные возможности автодополнения, но как вы отметили, отсутствует визуальное представление токенов в тексте. Это может быть решено путем кастомизации с использованием JavaScript для визуального представления токенов.
Рекомендации
-
Использование WYSIWYG редакторов: Многие WYSIWYG редакторы, такие как CKEditor или TinyMCE, могут быть настроены под ваши нужды. Вы можете создать отдельное меню с токенами и настроить его так, чтобы при выборе токена он вставлялся в текст в виде отдельного инлайнового элемента.
-
Собственная реализация на основе ContentEditable: Если вы хотите больше контроля над поведением редактора, рассмотрите возможность создания собственного решения, основанного на
contenteditableэлементов в HTML. Вы можете программно управлять вводом токенов, используя JavaScript для отслеживания позиции курсора и добавления пользовательских токенов в текст. -
Пользовательский интерфейс: Создайте отдельный контрол для выбора токенов, который будет отображаться при взаимодействии пользователя с редактором — например, выпадающее меню, где можно выбрать токен для вставки.
-
Финальная обработка на сервере: Как вы указали, окончательная обработка данных с подменой токенов на значения из базы данных должна происходить на сервере. Это может быть реализовано через регулярные выражения в вашем серверном коде.
Заключение
Система, которую вы хотите создать, требует продуманного подхода к интеграции текстового редактора с функциональностью токенов. Взгляните на существующие решения, но не забывайте о возможности создания собственного инструмента, который будет полностью удовлетворять ваши потребности. Поскольку таких готовых библиотек может быть не так много, возможно, лучший путь — это комбинирование готовых решений с индивидуальной настройкой под ваши специфические требования.
Если у вас есть дополнительные вопросы по реализации вашего проекта или по использованию конкретных библиотек, не стесняйтесь спрашивать.