如何在 Quill 中禁用自动子弹
How to disable automatic bullets in Quill
刚开始使用 Quill,发现它非常有用。我的项目需要纯文本编辑。具体来说,我使用 quill 作为输入 YAML 代码的表单。破折号“-”是 YAML 中的关键项。问题是 Quill 自动将行格式化为项目符号。
有没有办法禁用自动子弹?
凯文
查看 https://quilljs.com/docs/formats/ 似乎没有办法禁用特定格式,但您可以简单地创建所有格式的列表并删除 list
格式。
如评论中所述,将您在 "formats" 选项(不是工具栏区域)中允许的内容列入白名单
var editor = new quill("#someElemId", {
modules: {
toolbar: [
'bold',
//{ 'list': 'bullet' },
{ 'indent': '-1'},
{ 'indent': '+1' },
{ 'color': ['black', 'red', 'blue', 'green'] },
'link',
'clean'
]
},
formats : [
"background",
"bold",
"color",
"font",
"code",
"italic",
"link",
"size",
"strike",
"script",
"underline",
"blockquote",
// "header",
"indent",
// "list", <-- commented-out to suppress auto bullets
"align",
"direction",
"code-block",
"formula",
"image",
"video"
],
theme: 'snow', // snow bubble
});
Quill 的内置 Keyboard module 负责自动格式化列表。您可以像这样导入和扩展键盘模块来覆盖或禁用此行为。
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: undefined,
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
如果您仍然列出其他输入的检测(例如“*”),您可以像这样更改 'list autofill' 绑定匹配的正则表达式
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: {
...Keyboard.DEFAULTS.bindings['list autofill'],
prefix: /^\s*?(\d+\.|\*|\[ ?\]|\[x\])$/
},
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
这是一个工作示例:https://codepen.io/josephdangerstewart/pen/dyNEGoj
可以在 Quill 网站上找到有关模块的更多文档:https://quilljs.com/docs/modules/#extending
随便写:
modules: {
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}
}
这将忽略自动 有序列表。
但是,您仍然可以通过单击缩进命令或使用 tab 键手动使用项目符号。
刚开始使用 Quill,发现它非常有用。我的项目需要纯文本编辑。具体来说,我使用 quill 作为输入 YAML 代码的表单。破折号“-”是 YAML 中的关键项。问题是 Quill 自动将行格式化为项目符号。
有没有办法禁用自动子弹?
凯文
查看 https://quilljs.com/docs/formats/ 似乎没有办法禁用特定格式,但您可以简单地创建所有格式的列表并删除 list
格式。
如评论中所述,将您在 "formats" 选项(不是工具栏区域)中允许的内容列入白名单
var editor = new quill("#someElemId", {
modules: {
toolbar: [
'bold',
//{ 'list': 'bullet' },
{ 'indent': '-1'},
{ 'indent': '+1' },
{ 'color': ['black', 'red', 'blue', 'green'] },
'link',
'clean'
]
},
formats : [
"background",
"bold",
"color",
"font",
"code",
"italic",
"link",
"size",
"strike",
"script",
"underline",
"blockquote",
// "header",
"indent",
// "list", <-- commented-out to suppress auto bullets
"align",
"direction",
"code-block",
"formula",
"image",
"video"
],
theme: 'snow', // snow bubble
});
Quill 的内置 Keyboard module 负责自动格式化列表。您可以像这样导入和扩展键盘模块来覆盖或禁用此行为。
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: undefined,
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
如果您仍然列出其他输入的检测(例如“*”),您可以像这样更改 'list autofill' 绑定匹配的正则表达式
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: {
...Keyboard.DEFAULTS.bindings['list autofill'],
prefix: /^\s*?(\d+\.|\*|\[ ?\]|\[x\])$/
},
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
这是一个工作示例:https://codepen.io/josephdangerstewart/pen/dyNEGoj
可以在 Quill 网站上找到有关模块的更多文档:https://quilljs.com/docs/modules/#extending
随便写:
modules: {
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}
}
这将忽略自动 有序列表。 但是,您仍然可以通过单击缩进命令或使用 tab 键手动使用项目符号。