Получение ошибки BlotClass.create не является функцией в ReactQuill

Я пытаюсь создать пользовательский размер шрифта для панели инструментов в ReactQuill. Я решил вычеркнуть исходный код шрифта из quilljs и расширить его (как показано ниже):

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

Когда я пытаюсь импортировать и зарегистрировать SizeStyle в моем App.js, я получаю сообщение об ошибке в заголовке.

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>

какие-либо предложения?!

2 ответа

Я получал ту же ошибку, пока не изменил способ импорта пергамента.

Пытаться 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);
Другие вопросы по тегам