Как добавить пользовательские размеры шрифта в редактор QuillJS

Как добавить пользовательские размеры шрифта на панель инструментов с помощью QuillJS? Я пробовал два подхода:

// Initiate the editor
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'align': [] }],
            [{ 'size': ['10px', '20px', '80px'] }],
            [{ 'color': ['#FFF'] }]
        ];
        this.editor = new Quill('#executive-control-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

а также

<div id="toolbar">
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
            <select class="ql-align"></select>
        </span>
        <span class="ql-format-group">
          <select title="Size" class="ql-size">
            <option value="10px">Small</option>
            <option value="13px">Normal</option>
            <option value="18px">Large</option>
            <option value="32px">Huge</option>
          </select>
        </span>
        <span class="ql-formats">
            <button class="ql-image"></button>
        </span>
    </div>

Однако ни один из них не работает. Есть ли что-то, что мне здесь не хватает? Я также попытался удалить "px" из значения; еще ничего.


javascript quill
person Brandon    schedule 27.07.2016    source источник
comment
См. эту проблему.   -  person Jack Guy    schedule 28.07.2016
comment
@Harangue У него была проблема с невозможностью превзойти 18px. Я даже не могу заставить любой нестандартный размер работать. Кроме того, это было до Beta1.0. Сейчас выпустили 1.0.   -  person Brandon    schedule 28.07.2016
comment
Не забудьте также посмотреть здесь.   -  person Loa    schedule 30.12.2019

Ответы (3)


arrow_upward
5
arrow_downward

Сейчас это немного странно, поэтому я могу добавить это в конфигурацию Quill. Но на данный момент причина, по которой это не работает, заключается в том, что Quill по умолчанию использует классы для изменения размера, а вам нужны встроенные стили. Вы можете изменить это с помощью:

var Size = Quill.import('attributors/style/size');
Quill.register(Size, true);

// Rest is the same
var editor = new Quill('#editor');
person jhchen    schedule 28.07.2016
comment
Теперь я использую библиотеку CDN. Будет ли это работать? - person Brandon; 28.07.2016
comment
Я не мог заставить это решение работать. Он продолжал выдавать ошибку при попытке импортировать это. Однако я нашел обходной путь. Я сделал свою собственную копию файла css со снегом и изменил размер шрифта в файле. Спасибо чувак! - person Brandon; 28.07.2016
comment
Моя ошибка, я обновил ответ с правильным импортом - person jhchen; 28.07.2016
comment
Не работает.... - person Sathia; 29.12.2020

arrow_upward
45
arrow_downward

Принятый выше ответ не сработал для меня, но поставил меня на правильный путь.

Вот что мне нужно было сделать, чтобы текстовый редактор установил пользовательские размеры шрифта (а также установил встроенные стили для размера шрифта в базовом значении вместо класса CSS):

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);

var toolbarOptions = [
    [{ 'size': ['14px', '16px', '18px'] }],
];

var quill = new Quill("#quillElementSelector", {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    }
});

Мне также пришлось изменить свой CSS, чтобы переопределить метки в раскрывающемся списке панели инструментов. Обратите внимание, что значения «значение данных» в селекторах CSS должны соответствовать значениям, указанным выше.

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: 'Normal';
    font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: 'Large';
    font-size: 16px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: 'Huge';
    font-size: 18px !important;
}
person mfranchi    schedule 05.05.2017
comment
Спасибо! Это сработало и для меня. Ошибка при изменении Size на любое другое имя переменной. Странный!!! - person Sahal Sajjad; 26.08.2017
comment
Совершенно нелепо, что вам приходится прибегать к переопределению стилей с помощью их значений данных вместо использования какой-либо конфигурации, например: {'size': {'Small': '14px', 'Normal': false, 'Large': '16px', 'Huge': '18px'}} Опять же, это оставляет стилизацию пунктов меню в воздухе... - person pmarreck; 06.12.2017
comment
Обратите внимание, что, кроме того, чтобы заголовок меню отражал стиль, где бы ни находилась точка вставки (как это происходит для стандартных меню/меню по умолчанию), мне также пришлось добавить следующий вид CSS: .ql-picker-label[data-value="10px"]::before { content: 'Small' !important; } - person pmarreck; 06.12.2017
comment
Это гораздо лучший ответ на мою проблему. мое приложение требует, чтобы редактор имел ~ 200 размеров шрифта, используя ползунок в качестве средства выбора. Должен ли я внести в белый список каждое значение от моего минимального до максимального размера шрифта? - person Lonergan6275; 25.04.2019
comment
@ Lonergan6275 Вы нашли какое-нибудь решение? Мое требование такое же.. - person Neha; 29.04.2020

arrow_upward
5
arrow_downward

Собрав @mfranchi и @pmarreck, я получил стандартный список размеров шрифтов MS Word со следующим:

const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

var toolbarOptions = [
    [{ 'size': fontSizeArr }],
];

const quill = new Quill("#quillElementSelector", {
    modules: {
        toolbar: toolbarOptions,
    },
    theme: 'snow',
});

Вот чистое решение CSS, которое я нашел как эта проблема с Quill:

.ql-snow{
.ql-picker{
    &.ql-size{
        .ql-picker-label,
        .ql-picker-item{
            &::before{
                content: attr(data-value) !important;
            }
        }
    }
}
}
person Andrew    schedule 13.11.2020
comment
Похоже, вы использовали SASS вместо чистого CSS, основываясь на синтаксисе вложенного класса CSS. Вот чистое CSS-решение, которое я придумал сегодня: размер .ql-picker-item[значение данных]::before { content: attr(значение данных) !важно; } - person Pi Da; 03.03.2021