angular 5和quilljs[羊皮纸]无法创建污点

我正在使用，编辑器本身没有任何问题，但是我连续两天都在努力扩展自定义标记的标准块，官方文档中说要使用任何附加功能

我检查了github上的每个api和问题，在我看来，我走的路是对的，但我无法摆脱这个恼人的错误：

ERROR Error: [Parchment] Unable to create marker blot
at new ParchmentError (scripts.bundle.js:148)
at Object.create (scripts.bundle.js:178)
at BlockBlot.insertAt (scripts.bundle.js:7323)
at Block.insertAt (scripts.bundle.js:855)
at Scroll.ContainerBlot.insertAt (scripts.bundle.js:3404)
at ScrollBlot.insertAt (scripts.bundle.js:7060)
at Scroll.insertAt (scripts.bundle.js:4252)
at Editor.insertEmbed (scripts.bundle.js:2606)
at scripts.bundle.js:1379
at Quill.modify (scripts.bundle.js:1610)

我试图实现的是添加自定义标记，其中包含不可编辑的内容。这是我的密码：

...
import {Editor} from 'primeng/editor';

import * as Quill from 'quill';
import * as Parchment from 'parchment';
const Block = Quill.import('blots/block/embed');
class BlockEmbed extends Parchment.default.Embed {}
BlockEmbed.prototype = Block.prototype;

export class Variable extends BlockEmbed {

  static blotName = 'marker';
  static tagName = 'marker';

  static create(value: any) {
    console.log(value);
    const node = (super.create(value) as any);
    node.innerHTML = '<span contenteditable=false>' + value + '</span>';
    node.setAttribute('contenteditable', false);
    return node;
  }

}

Variable.blotName = 'marker';
Variable.tagName = 'marker';

Quill.register('formats/marker', Variable);

@Component({
  selector: 'manager',
  templateUrl: './manager.component.html',
  styleUrls: ['./manager.component.css']
})

export class ManagerComponent implements OnInit, AfterViewInit {

   private quill: any;
  @ViewChild(Editor) editorComponent: Editor;

  ngOnInit() {}

 // based on primeng github issue this how we can get references to quill 
  ngAfterViewInit() {
    this.quill = this.editorComponent.quill;
  }

 variableSelected(event) {
    // grubbing string variable from event 
    this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value);
  }

}

。。。
从'primeng/Editor'导入{Editor}；
从“纬管”导入*作为纬管；
从“羊皮纸”进口*作为羊皮纸；
const Block=Quill.import（'blots/Block/embed'）；
类BlockEmbed扩展了parchant.default.Embed{}
BlockEmbed.prototype=Block.prototype；
导出类变量扩展块嵌入{
静态名称='marker'；
静态标记名='marker'；
静态创建（值：任意）{
console.log（值）；
const node=（super.create（value）如有）；
node.innerHTML=''+value+''；
node.setAttribute（'contenteditable'，false）；
返回节点；
}
}
Variable.blotName='marker'；
Variable.tagName='marker'；
套筒寄存器（'格式/标记'，变量）；
@组成部分({
选择器：“经理”，
templateUrl:“./manager.component.html”，
样式URL:['./manager.component.css']
})
导出类管理器组件实现OnInit，AfterViewInit{
私人羽毛笔：任何；
@ViewChild（编辑器）编辑器组件：编辑器；
ngOnInit（）{}
//基于primeng github问题，我们将讨论如何获得对quill的引用
ngAfterViewInit（）{
this.quill=this.editorComponent.quill；
}
变量已选择（事件）{
//从事件中除根字符串变量
this.quill.insertEmbed（this.cursor.index | | | 0，'marker'，event.value）；
}
}

基于quill github中的这些主题，我的代码应该可以正常工作：

有人能帮我找到我遗漏了什么或者我的问题在哪里吗？

---

提前感谢。

我在使用ngx羽毛笔时遇到了同样的问题。我相信这个问题与以下事实有关：组件是在webpack隐藏的范围内声明的。因此，我们无法访问正确的Quill实例来注册额外的组件。 多亏了KillerCodeMonkey的帮助，我找到了一个解决方案。删除任何其他quill.js导入（在package.json或.angular cli.json中），这应该适用于angular/core 5.2.0：

import * as Quill from 'quill'; 
import Parchment from "parchment";

console.log(Quill);
const QuillBlockEmbed = (Quill as any).import('blots/block/embed');

class BlockEmbed extends Parchment.Embed {};
BlockEmbed.prototype = QuillBlockEmbed.prototype;

class MyBlot extends BlockEmbed {
    static create(value) {
        let node: Element = super.create(value) as Element;
        if (typeof value === 'object') {
            node.classList.add("my-class");
        }
        return node;
    }
...
}

MyBlot.blotName = 'boltTwo';
MyBlot.tagName = 'img';

(Quill as any).register({ 'blots/myblot':MyBlot});

---

我希望苹果公司能用下一种方法解决我的问题

...
declare var Quill: any;
const BlockEmbed = Quill.import('blots/embed');

export class Variable extends BlockEmbed {

  static create(value: any) {
    const node = super.create(typeof value === 'object' ? value.text : value);
    node.innerText = typeof value === 'object' ? value.text : value;
    node.setAttribute('contenteditable', false);
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('contenteditable'),
      text: node.innerText
    };
  }

}

Variable['blotName'] = 'marker';
Variable['className'] = 'marker';
Variable['tagName'] = 'span';

Quill.register('formats/marker', Variable);

export class ManagerComponent implements OnInit, AfterViewInit {

  private quill: any;

  @ViewChild('stepper') stepper;
  @ViewChild(Editor) editorComponent: Editor;

...

variableSelected(event) {
    this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value, 'user');
    this.quill.update('user'); 
  }

---

这样对我来说很好：

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;

const BlockEmbed = Quill.import('blots/block/embed');

---

请看下面我的回答，您需要将quill声明为any，因为quill是从JS文件全局定义的，只需让typescript知道该变量是从该文件范围之外定义的。实际上，如果您只是将quill声明为any，该变量是未定义的，并且与ngx quill通过webpack导入的quill.JS无关。如果通过.angular-cli.json导入quill.js，则该变量已定义，但指向的quill.js实例与ngx quill组件导入/使用的实例不同。感谢发布解决方案，它非常有用！谢谢你，对我来说，这就成功了。我正在使用并尝试使用

declare var Quill:any显然会把我的自定义污点放在一些进口的羽毛笔上，但显然不是ngx羽毛笔正在使用的那个。。。