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 行を取得しますが、テキスト エディターで入力を続けると、テキスト形式は変わりません。

デバッグのために、prepareFormat('size', this.value) の代わりに Quill JS ドキュメントの例の prepareFormat(' bold', true) を使用してみましたが、それも無視されているようです。

ここで何をお勧めしますか？

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 に答える