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

How to create own format buttons in Quill.js?

本文关键字：创建 自己的 格式 按钮 js Quill      更新时间：2023-09-26

我刚开始使用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 处理程序时，编辑器不再具有焦点，因此没有光标来准备格式。因此，唯一缺少的步骤是在调用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>

相关文章：