Кастомная вставка в Quill для Angular 9 выпуска - PullRequest
Новая
       83

Кастомная вставка в Quill для Angular 9 выпуска

0 голосов
/ 02 мая 2020

В моем приложении Angular 9 я пытаюсь добавить собственную кастомную вставку для Quill. Я не смог найти учебник для angular, в котором было бы что-то большее, чем изображение, поэтому я объединил несколько постов вместе. В конце концов я нашел этот ответ . К сожалению, каждый раз, когда я получаю следующую ошибку: 

ERROR Error: [Parchment] Unable to create my-custom-tag blot
at new ParchmentError (quill.js:148)
at Object.create (quill.js:178)
at BlockBlot.insertAt (quill.js:7483)
at Block.insertAt (quill.js:905)
at Scroll.ContainerBlot.insertAt (quill.js:3454)
at ScrollBlot.insertAt (quill.js:7218)
at Scroll.insertAt (quill.js:4324)
at Editor.insertEmbed (quill.js:2656)
at quill.js:1429
at Quill.modify (quill.js:1660)

Я использую angular компонент с Quill в нескольких местах. Мой код: 

import { Component, OnInit, Input } from '@angular/core';
import { PresenterParagraph } from '../../shared/models/_models';

declare var Quill: any;
var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
  static create(paramValue) {
    let node = super.create();
    node.innerHTML = paramValue;
    //node.setAttribute('contenteditable', 'false');
    //node.addEventListener('click', MyCustomTag.onClick);
    return node;
  }

  static value(node) {
    return node.innerHTML;
  }
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
Quill.register(MyCustomTag);
console.log("Quill Version: ", Quill.version);

@Component({
  selector: 'app-editor-paragraph',
  templateUrl: './editor-paragraph.component.html',
  styleUrls: ['./editor-paragraph.component.scss']
})
export class EditorParagraphComponent implements OnInit {
  @Input() paragraph: PresenterParagraph;
  editor: any;

  constructor() { }

  ngOnInit(): void {
  }

  created(editor) {
    this.editor = editor;
  }

  insertEmbed() {
    this.editor.insertEmbed(
      0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT, 
      'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
      '<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT 
    );
  }

  selectionChanged(x: any) {
    console.log(x);
  }
}

HTML

 <mat-checkbox [checked]="paragraph.selected" class="selector"></mat-checkbox>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{paragraph?.title}}
      </mat-panel-title>
    </mat-expansion-panel-header>
    <quill-editor [(ngModel)]="paragraph.content" (onSelectionChanged)="selectionChanged($event)" (onEditorCreated)="created($event)" ></quill-editor>
    <p>{{paragraph?.content}}</p>
    <button (click)="insertEmbed()">Insert</button>
    <app-editor-paragraphs [paragraphs]="paragraph?.paragraphs"></app-editor-paragraphs>
  </mat-expansion-panel>

Возможно, я что-то перепутал, поэтому буду очень благодарен за любые предположения, что не так.

...