1

ツール: Quill.js 使用例 ユーザーが読み取り専用エディターでテキスト範囲を選択し、強調表示を適用できるようにします。

詳細なコンテキスト Quill 0.20.1 を使用しているいくつかのコードを保守しています。readOnly:true エディターを作成して、コンテンツが変更されないようにしました。エディターのテキスト コンテンツは readOnly ですが、ユーザーが選択内容を参照するメタデータを選択、強調表示、関連付けできるようにしたいと考えています。(基本的にはクイルエディタでユーザーがどの範囲を選択したかを読みたかったのです)

だから私は次のことを試しました：

readOnlyHighlightable.quill.editor.selection.getRange(); // And it did not work

また、イベント「selection-change」をリッスンしようとしても、イベントによって呼び出されないようです。

readOnlyHighlightable.quill.on("selection-change", function (range) {
    console.log(range);
});

対照的に、クイル エディター コンストラクターから readOnly フラグを削除すると、うまく機能します。これは望ましい動作ですか？readOnly エディターが選択できないのはなぜですか?

最後に、単純なエディター (テーマ: 雪とフォーマット: ["background"]) を作成し、次の関数でエディターを無効にしようとしましたが、範囲関数は選択された範囲を返しません。

quill.editor.enable(false);

enable(false) 関数を呼び出さない場合、getRange() は正常に機能します。

参照 範囲関数: quill.editor.selection.getRange();

関数を無効にする: quill.editor.enable(false);

PS。私は Quill 1.0 に興奮していますが、この機能を Quill.js 0.20.1 に実装する必要があります。

4

1 に答える 1

0

クイルの選択は、エディターが現在「アクティブな」要素であるという前提で機能します。ただし、ブラウザーの観点からは、無効化されたコンテンツ編集可能な div はアクティブではありません。したがって、これを回避するには、tab index:1 を設定して、ブラウザーが「アクティブな要素です」で true を返すようにします。

$("#ql-editor-1").attr("tabIndex", 1);
myEditor.quill.editor.selection.getRange();

お役に立てれば。

于 2016-09-15T21:21:08.967 に答える