如何解决扩展羽毛笔以支持软换行
我正在尝试使用自定义污点扩展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);
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。