扩展羽毛笔以支持软换行

问题描述

我正在尝试使用自定义污点扩展quill，以允许在<p>标签内使用换行符。根据{{​​3}}，我最终找到了如下代码：

import * as quill from 'quill';

const Delta = quill.import('delta');
const Embed = quill.import('blots/embed');

export class SoftLineBreakBlot extends Embed {
    static blotName = 'softbreak';
    static tagName = 'br';  
    static className = 'softbreak';
}

export function shiftEnterHandler(this: any,range) {    
    const currentLeaf = this.quill.getLeaf(range.index)[0];
    const nextLeaf = this.quill.getLeaf(range.index + 1)[0];    
    this.quill.insertEmbed(range.index,"softbreak",true,quill.sources.USER);    
    // Insert a second break if:
    // At the end of the editor,OR next leaf has a different parent (<p>)
    if (nextLeaf === null || currentLeaf.parent !== nextLeaf.parent) {
      this.quill.insertEmbed(range.index,quill.sources.USER);
    }
    // Now that we've inserted a line break,move the cursor forward
    this.quill.setSelection(range.index + 1,quill.sources.SILENT);    
}

export function brMatcher(node,delta) {
    let newDelta = new Delta();
    newDelta.insert({softbreak: true});
    return newDelta;
}

在Angular 10项目中，我在quill上使用了ngx-quill包装器。我的羽毛笔模块的定义如下：

quillModule.forRoot({
      format: 'json',modules: {
        keyboard: {
          bindings: {
            "shift enter": {
              key: 13,shiftKey: true,handler: shiftEnterHandler
            }
          }
        },clipboard: {
          matchers: [            
             [ "BR",brMatcher ]
          ],}
      },}),

但是，每当我按Shift + Enter时，光标都会向前移动，但是insertEmbed()调用似乎没有任何作用。我在做什么错了？

解决方法

您好像忘记调用 Quill.register(SoftLineBreakBlot)

所以：

...
export class SoftLineBreakBlot extends Embed {
    static blotName = 'softbreak';
    static tagName = 'br';  
    static className = 'softbreak';
}
...

变成：

...
export class SoftLineBreakBlot extends Embed {
    static blotName = 'softbreak';
    static tagName = 'br';  
    static className = 'softbreak';
}
Quill.register(SoftLineBreakBlot);
...