0

我刚开始使用 Quill.js 富文本编辑器，在尝试创建自己的文本格式按钮时遇到了挑战。

在 HTML 中，我在里面添加了以下单选按钮。​</p> 

<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)，但这似乎也被忽略了。

你会在这里推荐什么？

4

1 回答 1

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>

于 2016-02-22T10:30:53.340 回答