如何在 angular 的 p-editor 上使用 ql-image 添加验证？

Question

任何人都可以帮助我如何在输入标签上调用函数，该标签将从 p-editor 的 ql-image 创建。 我想限制该功能上的图像大小。 但我无法调用该输入标签中的函数。

下面是我用于上传图像的 p 编辑器代码部分。

<p-editor #pEditor required class="pEditor">
  <p-header>
    <span class="ql-formats">
     <button class="ql-clean" aria-label="Remove Styles" tabindex="-1"></button>
     <button class="ql-image" aria-label="Insert Image"  tabindex="-1"></button>
    </span>
  </p-header>
 </p-editor>

输入标签显示在源代码中。 如何向此标签添加功能？

Answer 1

qill富文本编辑器里面使用的primeng编辑器。 要执行您想要的操作，您实际上需要扩展 Quill 编辑器。 它们提供可扩展性，您可以覆盖按下工具栏按钮时发生的操作。 在这种情况下，您需要为image操作添加您自己的自定义工具栏处理程序。 要从primeng 编辑器获取Quill 编辑器，提供了一个方法getQuill，请查看primeng 编辑器文档以获取更多详细信息。 您可以在ngAfterViewinit 生命周期事件挂钩中获取编辑器，然后附加自定义处理程序以添加您的图像处理。 要实现处理程序，您需要复制创建输入和下载文件的所有代码。 不幸的是，它并不是那么简单，但是您可以在其中做任何您想做的事情。 我从 Quill 编辑器中的原始代码中复制了它，并添加了大小处理。

这是我的示例实现。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  public title = 'CodeSandbox';
  public text: string;
  @ViewChild(Editor) editor: Editor;

  public ngAfterViewInit() {
    const quill = this.editor.getQuill();
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', function () {
      const fileInput = toolbar.container.querySelector(
        'input.ql-image[type=file]'
      );
      if (fileInput == null) {
        fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute(
          'accept',
          'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
        );
        fileInput.classList.add('ql-image');
        fileInput.addEventListener('change', function () {
          if (fileInput.files != null && fileInput.files[0] != null) {
            if (fileInput.files[0].size > 102400) {
              alert('image to big it neeeds to be les than 100kb');
            } else {
              const reader = new FileReader();
              reader.onload = function (e) {
                const range = quill.getSelection(true);
                quill.updateContents(
                  new Delta().retain(range.index).delete(range.length).insert({
                    image: e.target.result
                  }),
                  'user'
                );
                quill.setSelection(range.index + 1, 'silent');
                fileInput.value = '';
              };
              reader.readAsDataURL(fileInput.files[0]);
            }
          }
        });
        toolbar.container.appendChild(fileInput);
      }
      fileInput.click();
    });
  }
}

还有 html 模板。

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

要查看它是否正常工作，您可以使用完全实现的示例检查CodeSandbox 。

Answer 2

有点复杂但可以做，

注意：如果可以添加唯一ID会更好

//collection of class tag elements
console.log(document.getElementsByClassName("ql-image"));

// assign it to a variable
let elementsCollection = document.getElementsByClassName("ql-image");

//convert it to an array
let tags = Array.prototype.slice.call(elementsCollection, 0) as Array<any>;

//map and get the input element
tags.map(e => {
  if (e.tagName === "INPUT") {


   //one way when input changes
      e.addEventListener('change', (event) => {
      let newFile = e.files[0];
      if (!newFile) {
        console.log("please select a file");
      } else {
        let file = newFile;
        console.log(
          "File " + file.name + " is " + file.size / 10 ** 6 + " mb in size"
        );
      }
    });


    //assumed you can add id to insert image button and when uploading
    document.getElementById("btnLoad").addEventListener("click", () => {
      let newFile = e.files[0];
      if (!newFile) {
        console.log("please select a file");
      } else { 
        let file = newFile;
        console.log(
          "File " + file.name + " is " + file.size / 10 ** 6 + " mb in size"
        );
        //add your filesize logic here
      }
    });
  }
});



//HTML I used 
<button id="btnLoad" class="ql-image" aria-label="Insert Image" 
tabindex="-1">Insert Image</button>
   
<input class="ql-image" type="file">

stackbliz 例子

希望这足以让您前进:) 享受！ 请注意，在地图内我已经解释了两种方法来做到这一点