如何在 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 行，但当我继续在文本编辑器中键入时，文本格式保持不变。

为了调试，我尝试使用 Quill JS 文档示例中的 prepareFormat('bold', true) 而不是 prepareFormat('size', this.value)，但这似乎是也被忽略了。

你会在这里推荐什么？

Answer 1

这里的问题是当调用 onclick 处理程序时，编辑器不再具有焦点，因此没有光标来准备格式。所以唯一缺少的步骤是在调用 prepareFormat():

之前添加一个 focus() 调用

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>

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

How to create own format buttons in Quill.js?

javascript

rich-text-editor

quill