这指向主轴编辑器工具栏 [英] this is pointing to the quill editor toolbar

问题描述

我在我的网站上使用 Quilljs 作为文本区域.标准编辑器不支持将图像上传到服务器，因此我必须实现一个自定义处理程序.在文档中写有以下内容:

I use Quilljs for a textarea on my website. The standard editor don't support image upload to the server, so i have to implement a custom handler. In the documentation is written the following:

处理程序功能将绑定到工具栏(因此使用此功能将请参阅工具栏实例)并传递了如果相应格式无效，则输入；否则返回false.

Handler functions will be bound to the toolbar (so using this will refer to the toolbar instance) and passed the value attribute of the input if the corresponding format is inactive, and false otherwise.

这实际上对我来说是个问题，我不知道如何以干净和正确"的方式解决它.我建立了一个有角度的应用程序，并为图像上传编写了一个自定义处理程序.此自定义图像处理程序应在角度服务的帮助下将图像上载到服务器.数据服务在应用程序和我的组​​件的成员中全局提供，我可以使用 this.dataService 访问它.但是单击工具栏中的图像上传图标后，此已绑定到工具栏，我无法再访问我的数据服务.我可以避开工具栏的边界吗?

This is actually a problem for me and i dont know how to resolve it in a clean and "right" way. I built an angular application and i have written a custom handler for image uploading. This custom image handler should upload the image with the help of an angular service to the server. The data service is globally provided in the app and a member of my component and i can access it with this.dataService. But after clicking the image upload icon in the toolbar, this is bound to the toolbar, i can't access my data service anymore. Can i avoid this boundary to the toolbar?

是明确的.假设我已经使用以下代码创建了一个主轴编辑器:

In explicit. Assume i have created a quill editor with the following code:

this.editor = new Quill('#editor', {
      modules: { toolbar: "#toolbar"},
      placeholder: 'Some Placeholder',
      theme: 'snow'
});

现在，我使用

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

和我的处理程序函数例如:

and my handler function for instance:

imageHandler(event) {
  this.dataService.addImage(event.file);
}

使用我已经实现和测试的dataService.但是 this.dataService 不存在，因为 this 现在已绑定到工具栏.我使用组件的构造函数初始化了服务.

which uses the dataService which i've already implemented and tested. But this.dataService don't exists because this is now bind to the toolbar. I initialized the service with the constructor of the component.

constructor(private dataService: DataService) {

}

当我在构造函数中调用 this.dataService 时，可以找到它并且边界很好，但是我需要在我的图像处理函数中调用它以将文件发送到服务器.

When i call this.dataService in the constructor, then it can be found and the boundary is fine, but i need to call it in my image handler function to send the file to the server.

最诚挚的问候，斯文

推荐答案

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

The easiest way to solve this problem is to change

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

进入

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

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

now you can access your components variables/members in your image handler function. The toolbar have not anymore the focus.

这篇关于这指向主轴编辑器工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！