javascript - 如何在Quill.js中创建自己的格式按钮？

我刚开始使用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行，但是当我继续输入文本编辑器时，文本格式保持不变。

为了进行调试，我尝试使用Quill JS文档示例中的prepareFormat（'bold'，``true）代替prepareFormat（'size'，this.value），但这似乎也被忽略了。

您会在这里推荐什么？

最佳答案

这里的问题是当调用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>