Попытка реализовать компонент textarea
с поддержкой смайликов при записи.
Я хочу иметь возможность резервировать исходный текст (только символы ascii), представляя результат фильтрации/сгенерированного html (с фильтром смайликов angular) на div
.
Мое начальное решение -
<textarea ng-model="text" ng-change="..." ng-focus="..."></textarea>
<div ng-bind-html="text | myEmoticonsFilter"></div>
но у меня возникают проблемы с тем, чтобы использовать скрытую текстовую область. Кроме того, с этим я не смог бы выбрать текст для выбора мыши и удалить или скопировать/вставить безопасно.
Я также думал об использовании <div contenteditable="true">
, но ng-focus
и ng-change
не обрабатывался.
Есть ли у кого-нибудь какие-либо рекомендации относительно продолжения этого?
Изменить 1: здесь jsfiddle с попыткой сделать то, что я делаю. До сих пор можно было заменить первое вхождение, но с тех пор поведение остается неустойчивым. Я использую директиву contenteditable
для привязки двухсторонних данных и фильтрации шаблона смайликов.
Изменить 2: в отношении моего утверждения о том, что ng-focus
и ng-change
не будут обрабатываться, это не так - ng-focus
работает изначально на <div contenteditable="true">
и ng-change
будет работайте, пока директива объявляется с помощью ngModel
и устанавливает соответствующие $modelValue
и $viewValue
(пример приведен в jsfiddle в Изменить 1).