Question

我在我的网站上使用Quilljs作为textarea。标准编辑器不支持将图像上传到服务器，因此我必须实现自定义处理程序。在文档中写了the following:

处理程序函数将绑定到工具栏（因此使用此方法参考工具栏实例）并传递了值的属性如果相应的格式处于非活动状态则输入，否则输入false。

对我来说这实际上是一个问题，我不知道如何在一个干净的＆＃34;右边＆＃34;办法。我构建了一个角度应用程序，我已经为图像上传编写了自定义处理程序。此自定义图像处理程序应在角度服务的帮助下将图像上载到服务器。数据服务在应用程序和我的组件的成员中全局提供，我可以使用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时，它可以被找到并且边界很好，但是我需要在我的图像处理函数中调用它来将文件发送到服务器。

祝你好运，斯文

Answer 1

解决此问题的最简单方法是更改

this.editor.getModule("toolbar").addHandler("image", imageHandler);

到

this.editor.getModule("toolbar").addHandler("image", imageHandler.bind(this));

现在您可以在图像处理函数中访问组件变量/成员。工具栏已不再是焦点。

这是指向羽毛笔编辑器工具栏

1 个答案: