Как создать собственные кнопки формата в Quill.js?

Question

Я только начал играть с богатым текстовым редактором Quill.js и столкнулся с проблемой при попытке создать свои собственные кнопки форматирования текста.

В HTML я внутри добавлены следующие кнопки радио

<form name="temp-form"> 
<input type="radio" name="font-size-radio" value="10px">10px 
<input type="radio" name="font-size-radio" value="13px">13px 
</form> 

В JavaScript я пытаюсь изменить настройки шрифта размера с помощью prepareFormat:.

var radios = document.forms["temp-form"].elements["font-size-radio"]; 
for (radioValue in radios) { 
    radios[radioValue].onclick = function() { 
    editor.prepareFormat('size', this.value);​​ 
    } 
} 

После нажатия на кнопки радио JavaScript получает prepareFormat, но когда я продолжаю печатать текстовый редактор, текстовый формат остается прежним.

Для отладки я попытался использовать prepareFormat ('bold', true) из примера документации Quill JS вместо prepareFormat ('size', this.value), но это тоже игнорируется.

Что вы посоветрите здесь?

Answer 1

Проблема здесь, когда вызывается обработчик onclick, у редактора больше нет фокуса, поэтому для подготовки форматов нет курсора. Таким образом, единственный шаг, не хватает, чтобы добавить focus() вызов перед вызовом prepareFormat():

var editor = new Quill('#editor'); 
 

 
var radios = document.forms["temp-form"].elements["font-size-radio"]; 
 
for (radioValue in radios) { 
 
    radios[radioValue].onclick = function(e) { 
 
    editor.focus(); 
 
    editor.prepareFormat('size', this.value) 
 
    } 
 
}

<script src="https://cdn.quilljs.com/0.20.1/quill.js"></script> 
 

 
<form name="temp-form"> 
 
<input type="radio" name="font-size-radio" value="10px">10px 
 
<input type="radio" name="font-size-radio" value="13px">13px 
 
<input type="radio" name="font-size-radio" value="18px">18px 
 
</form> 
 

 
<div id='editor'> 
 
Test 
 
</div>