接收错误 BlotClass.create 不是 ReactQuill 中的函数
Receiving the error BlotClass.create is not a function in ReactQuill
我正在尝试为 ReactQuill 中的工具栏创建自定义字体大小 drop-down。我决定从 quilljs 中删除 font-size 的原始代码并对其进行扩展(如下所示):
import Parchment from 'parchment';
let SizeClass = new Parchment.Attributor.Class('size', 'ql-size', {
scope: Parchment.Scope.INLINE,
whitelist: ['8', '9', '10', '11', '12', '13', '14', '16', '18', '24', '36']
});
let SizeStyle = new Parchment.Attributor.Style('size', 'font-size', {
scope: Parchment.Scope.INLINE,
whitelist: ['8px', '9px', '10px', '11px', '12px', '13px', '14px', '16px', '18px', '24px', '36px']
});
export { SizeClass, SizeStyle };
当我尝试在 App.js 中导入和注册 SizeStyle 时,我收到标题中的错误。
import React, { Component } from 'react';
import ReactQuill, {Quill} from 'react-quill'
import { SizeClass, SizeStyle } from './font-size'
import { ImageDrop } from 'quill-image-drop-module'
import { ImageResize } from 'quill-image-resize-module'
Quill.register(SizeStyle, true)
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
然后我有了自己的 HTML 工具栏,它在下拉列表中包含所有尺寸属性:
<div id="toolbar">
<select className="ql-size">
<option value="8px"></option>
<option value="9px"></option>
<option value="10px"></option>
<option value="11px"></option>
<option value="12"></option>
<option value="13"></option>
<option value="14"></option>
<option value="16"></option>
<option value="18"></option>
<option value="24"></option>
<option value="36"></option>
</select>
</div>
有什么建议吗?!
在我更改导入 Parchment 的方式之前,我一直遇到同样的错误。
尝试 var Parchment = Quill.import('parchment');
而不是 import Parchment from 'parchment';
我遇到了与上述相同的错误,因此通过调用 Parchment.ClassAttributor 解决了这些错误:
var Parchment = Quill.import('parchment');
let config = { scope: Parchment.Scope.BLOCK };
let SpanWrapper = new Parchment.ClassAttributor('span', 'span-wrapper', config);
Quill.register(SpanWrapper, true);
我正在尝试为 ReactQuill 中的工具栏创建自定义字体大小 drop-down。我决定从 quilljs 中删除 font-size 的原始代码并对其进行扩展(如下所示):
import Parchment from 'parchment';
let SizeClass = new Parchment.Attributor.Class('size', 'ql-size', {
scope: Parchment.Scope.INLINE,
whitelist: ['8', '9', '10', '11', '12', '13', '14', '16', '18', '24', '36']
});
let SizeStyle = new Parchment.Attributor.Style('size', 'font-size', {
scope: Parchment.Scope.INLINE,
whitelist: ['8px', '9px', '10px', '11px', '12px', '13px', '14px', '16px', '18px', '24px', '36px']
});
export { SizeClass, SizeStyle };
当我尝试在 App.js 中导入和注册 SizeStyle 时,我收到标题中的错误。
import React, { Component } from 'react';
import ReactQuill, {Quill} from 'react-quill'
import { SizeClass, SizeStyle } from './font-size'
import { ImageDrop } from 'quill-image-drop-module'
import { ImageResize } from 'quill-image-resize-module'
Quill.register(SizeStyle, true)
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
然后我有了自己的 HTML 工具栏,它在下拉列表中包含所有尺寸属性:
<div id="toolbar">
<select className="ql-size">
<option value="8px"></option>
<option value="9px"></option>
<option value="10px"></option>
<option value="11px"></option>
<option value="12"></option>
<option value="13"></option>
<option value="14"></option>
<option value="16"></option>
<option value="18"></option>
<option value="24"></option>
<option value="36"></option>
</select>
</div>
有什么建议吗?!
在我更改导入 Parchment 的方式之前,我一直遇到同样的错误。
尝试 var Parchment = Quill.import('parchment');
而不是 import Parchment from 'parchment';
我遇到了与上述相同的错误,因此通过调用 Parchment.ClassAttributor 解决了这些错误:
var Parchment = Quill.import('parchment');
let config = { scope: Parchment.Scope.BLOCK };
let SpanWrapper = new Parchment.ClassAttributor('span', 'span-wrapper', config);
Quill.register(SpanWrapper, true);