이것은 퀼 에디터 툴바를 가리키고 있습니다

Question

나는 내 웹 사이트의 텍스트 영역에 Quilljs을 사용합니다. 표준 편집기는 이미지 업로드를 서버에 지원하지 않으므로 사용자 지정 처리기를 구현해야합니다. 문서에서 the following:

핸들러 기능 (그래서 툴바 인스턴스를 참조한다 이것을 사용) 도구에 결합 될 기록 및 대응 포맷이 비활성 인 경우 입력 값 속성을 전달하고, 거짓되고 그렇지 않으면.

이것은 실제로 나를위한 문제이며 깨끗하고 "올바른"방식으로 문제를 해결하는 방법을 모릅니다. 난 각도 응용 프로그램을 구축하고 이미지 업로드를위한 사용자 지정 처리기를 작성했습니다. 이 사용자 정의 이미지 처리기는 각도 서비스를 사용하여 이미지를 서버에 업로드해야합니다. 데이터 서비스는 앱과 내 구성 요소에 전역으로 제공되며 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이 존재하지 않습니다. 구성 요소 생성자를 사용하여 서비스를 초기화했습니다.

constructor(private dataService: DataService) { 

} 

내가 생성자에서 this.dataService를 호출 는, 다음은 발견과 경계는 괜찮지 만, 난 서버에 파일을 보내 내 이미지 핸들러 함수에서를 호출해야 할 수 있습니다.

안부, 스벤

Answer 1

이 문제를 해결하는 가장 쉬운 방법은 지금 당신이 당신의 이미지에 구성 요소 변수/회원에 액세스 할 수 있습니다

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

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

로 변경하는 것입니다 핸들러 함수. 도구 모음에는 더 이상 초점이 없습니다.