Angular 是否可以在剑道编辑器中以某种方式使用管道？

是否可以在剑道编辑器中以某种方式使用管道

我的用例如下。我已经实现了从本地机器到我自己的端点的图像上传（如上所述）。此外，我还实现了一个get端点，它返回图像。因此，我可以使用链接通过

src

image属性检索图像。但我需要对用户进行身份验证才能调用get端点

我对以下问题的研究：

如何拦截src-http请求并为其设置头？

引导我找到了一个使用安全管道的解决方案，它将为我运行请求。这篇文章描述了解决方案

我能够实现这个解决方案。现在，在我的角度模板中，我有：

<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />

映像是通过端点加载的，因为我能够使用身份验证（因为我显式地运行http请求，而不是将其委托给浏览器）

所以，如果我能够以某种方式添加代码，那将是非常非常棒的

<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />

输入剑道编辑器值并实际查看图像。但我不知道如何在剑道编辑器的值中使用管道

对于身份验证，我使用带有承载令牌的头

那么，有人能给我一个如何在剑道编辑器中使用管道的建议吗

预加载图像并将其作为base64存储在剑道编辑器值的src中的选项不适合我，因为在我的剑道编辑器值中可能有很多图像，而我将该值作为字符串存储在数据库中。因此，如果我使用base64，我可能会很快耗尽空间（因为，我会将所有图像存储在文本中）

更新

是我尝试使用指令。可以看到，该指令的类被添加到图像中，但警报消息不会触发

指令：

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '.customDownload',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    
    alert("code reached");
  }
}

从'@angular/core'导入{Directive，ElementRef}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
@指示({
//tslint：禁用下一行：指令选择器
选择器：'.customDownload'，
})
导出类ImgHandlingDirective{
建造师(
二等兵el:ElementRef，
私有http:HttpClient，
) {
警报（“到达代码”）；
}
}

验证是否已将类添加到映像：

是剑道编辑器组件api

---

指令本身运行良好。如果我们将

添加到app.component的模板中，则会到达“代码输入”指令并发出警报。

您可以使用指令，但图像将上载两次，一次是本机上载，一次是通过httpClient上载：

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: 'img[src]',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    this.el.nativeElement.style.display = 'none';

    const url = this.el.nativeElement.src;

    this.loadImage(url).subscribe(src => {
      this.el.nativeElement.src = src;
      this.el.nativeElement.style.display = 'block';
    });
  }
  private loadImage(url: string): Observable<string> {
    return this.http
      // load the image as a blob
      .get(url, { responseType: 'blob' }).pipe(
        // create an object url of that blob that we can use in the src attribute
        map(e => URL.createObjectURL(e)),
      );
  }
}

---

也许可以通过某种方式向图像添加自定义指令？这样就不用用自定义方式上传剑道编辑器中没有的图像了。我只是试过了。指令没有进入剑道编辑器：（@SasukeUchiha创建了一个stackblitz的示例。非常感谢您的时间。我刚刚更新了y问题。您可以通过上传图像并在编辑器内容中查看来重现问题。上传图像后，我需要调用指令，但不会调用它。

public uploadImage(): void {
  const { src } = this.imageInfo;

  this.http
  // load the image as a blob
  .get(src, { responseType: 'blob' }).pipe(
    // create an object url of that blob that we can use in the src attribute
    map(e => URL.createObjectURL(e)),
  ).subscribe(() => {
    // Invoking the insertImage command of the Editor.
    this.editor.exec('insertImage', this.imageInfo);

    // Closing the Dialog.
    this.close();
  });
}