Я использую Quilljs в качестве текстового поля на моем веб-сайте. Стандартный редактор не поддерживает загрузку изображений на сервер, поэтому мне нужно реализовать собственный обработчик. В документации написано следующее:
Функции-обработчики будут привязаны к панели инструментов (так что использование this будет относиться к экземпляру панели инструментов) и передать атрибут value ввода, если соответствующий формат неактивен, и false в противном случае.
На самом деле это проблема для меня, и я не знаю, как ее решить чистым и "правильным" способом. Я создал приложение angular и написал собственный обработчик для загрузки изображений. Этот пользовательский обработчик изображений должен загружать изображение с помощью службы angular на сервер. Служба данных глобально предоставляется в приложении и является членом моего компонента, и я могу получить к ней доступ с помощью this.dataService. Но после щелчка по значку загрузки изображения на панели инструментов this привязан к панели инструментов, я больше не могу получить доступ к своей службе данных. Могу ли я избежать этой границы на панели инструментов?
В явном виде. Предположим, я создал редактор перьев со следующим кодом:
this.editor = new Quill('#editor', {
modules: { toolbar: "#toolbar"},
placeholder: 'Some Placeholder',
theme: 'snow'
});
Теперь я добавляю пользовательский обработчик к значку изображения с помощью
this.editor.getModule("toolbar").addHandler("image", imageHandler);
и моя функция-обработчик, например:
imageHandler(event) {
this.dataService.addImage(event.file);
}
который использует dataService, который я уже реализовал и протестировал. Но this.dataService не существует, потому что this теперь привязан к панели инструментов. Я инициализировал службу с помощью конструктора компонента.
constructor(private dataService: DataService) {
}
Когда я вызываю this.dataService в конструкторе, его можно найти, и граница в порядке, но мне нужно вызвать ее в моей функции обработчика изображений, чтобы отправить файл на сервер.
С уважением, Свен
