是否可以在 Angular 中以某种方式使用 kendo-editor 中的管道？

Question

我的用例如下。我已经实现了从本地机器上传图像到我自己的端点（如 here 所述）。此外，我还实现了一个 returns 图像的获取端点。因此，我可以使用链接通过 src 图像属性检索图像。但是我需要对用户进行身份验证才能调用 get 端点。

我对这个问题的研究：How to intercept the src http request and set headers for it? 使我找到了安全管道的解决方案，这将运行满足我的要求。例如。 this 文章描述了解决方案。

我能够实施该解决方案。所以，现在在我的 Angular 模板中我有：

<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" />

进入 kendo 编辑器值并实际看到图像。但是我不知道如何在 kendo 编辑器的值中使用管道。

对于身份验证，我使用 header 和不记名令牌。

所以，有人可以建议我如何在 kendo 编辑器中使用管道吗？

预加载图像并将它们存储在 kendo 编辑器值的 src 中作为 base64 的选项不适合我，因为在我的 kendo 编辑器值中可能我有很多图像，我将值作为字符串存储在数据库中。所以，如果我使用 base64，我可能运行会很快从 space 中取出（因为，我会将所有图像存储在文本中）。

更新

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

指令：

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");
  }
}

验证 class 已添加到图像：

Here 是 kendo-editor 分量 api。

指令本身工作正常。如果我们将 <img class="customDownload" /> 添加到 app.component 的模板中，那么将到达指令中的代码并触发警报。

Answer 1

您可以使用指令，但图像将上传两次，一次本地上传，一次通过 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)),
      );
  }
}

更新后： 您可以更改 uploadImage() 功能以通过 httpClient

上传

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();
  });
}

是否可以在 Angular 中以某种方式使用 kendo-editor 中的管道？

Is it possible to somehow use pipes in kendo-editor in Angular?

src

kendo-ui

angular-pipe

prose-mirror

angular