Question

我使用基于quilljs的primeng编辑器，并努力修改字符串中特定事件的自定义标记。我有这样的字符串：

User data {{userName}} - {{lastName}}. Topic {{title}} and date: {{occurredDate}}

我正在努力实现这一结果：

然而，quill将整个字符串放在自定义印迹中，结果看起来是下一个：

这是我自定义污点的代码：

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

这是我在字符串

中修改的功能

 initNotification() {

    if (this.form.valid) {

        this.quill = this.editorComponent.getQuill();

        const delta = this.quill.getContents();

        const marker = function (string) {
          string = string
            .replace(/{{/g, ' ')
            .replace(/}}/g, ' ')

          return {
            marker: {
              style: 'false',
              text: string
            }
          }
        };

        const breaker = {
          insert: '\n'
        };

        const checkDelta = function (ops) {
          ops.forEach( (obj, index, array) => {
            if (!obj.insert.hasOwnProperty('marker') && obj.insert.match(/{{(.*)}}/g)) {
              if (obj.insert.match(/[^\r\n]+/g)) {
                obj.insert = marker(obj.insert);
                array.splice(index + 1, 0, breaker);
                checkDelta(array)
              } else {
                obj.insert = marker(obj.insert);
              }
            }
          });
        };

        checkDelta(delta.ops);

        this.quill.setContents(delta);
        this.quill.update('user');
      }
    }

那么有人可以帮我找到我的错误吗？我感谢任何帮助，提前谢谢。

这是stackblitz。不幸的是，我不能强迫它发挥作用。

EDITED

经过一番调查，我发现印迹已经得到了整个字符串，这就是为什么羽毛笔将这个字符串应用为印迹。另外我在这个函数中发现了问题：

 const checkDelta = function (ops) {
          ops.forEach( (obj, index, array) => {
            if (!obj.insert.hasOwnProperty('marker') && obj.insert.match(/{{(.*)}}/g)) {
              if (obj.insert.match(/[^\r\n]+/g)) {

                console.log(obj.insert) // User data {{userFirstname}} -{{userLastname}} . Topic {{title}} . Date: {{occuredAt}}

                obj.insert = marker(obj.insert);

// return marker = {style: false, text: User data userFirstname - userLastname . Topic title . Date: occuredAt}
                array.splice(index + 1, 0, breaker);
                checkDelta(array)
              } else {
                console.log(obj.insert) 

                obj.insert = marker(obj.insert);
              }
            }
          });
        };

Answer 1

所以在这个故事的最后，我发现直接在我的代码中替换span标签上的这些花括号更容易，因为quill看到匹配并自己做所有其他的东西

我的工作代码如下：

let text = User data {{userName}} - {{lastName}}. Topic {{title}} and date: {{occurredDate}} 

text = text
         .replace(/{{/g, '<span class="marker" contenteditable="false">')
         .replace(/}}/g, '</span>')

此外，我已将node.innerText更改为node.textContent，因为quill会在其中添加额外的span标记，因此有时innerText会返回空值。

    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.textContent
    };
  }

}

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

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

我还完全删除了函数initNotification

中的代码

initNotification() {

    if (this.form.valid) {

        this.quill = this.editorComponent.getQuill();

      }
    }

插入quilljs标记而不是字符串中的特定匹配项

1 个答案: