Quill.js - Unable Auswahllbereich auf einem readonly zu bekommen: Editierfunktionen in Quill.js 0.20.1 -

Question

Tool: Quill.js USE CASE Um zu lassen Benutzer wählen Sie einen Textbereich in einem nur lesbaren Editor und markiere die Hervorhebung.

Ausführlicher Kontext Ich behalte einen Code, der Quill 0.20.1 verwendet. Ich habe einen readOnly: true-Editor erstellt, um zu verhindern, dass der Inhalt geändert wird. Obwohl der Textinhalt im Editor readOnly ist, möchte ich dennoch, dass der Benutzer Metadaten auswählen, markieren und assoziieren kann, die auf die getroffene Auswahl verweisen. (Im Grunde ich lesen wollte, welche Auswahl der Benutzer auf Pinole Editor gemacht reichen)

So habe ich versucht, die folgenden:

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

Und versuchen, auf Ereignis „Auswahl-change“ zu hören scheint auch nicht zu durch Ereignisse aufgerufen werden.

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

Im Gegensatz, wenn ich das readOnly Flag aus dem Editor Editor Editor entfernen, funktioniert es gut. Ist das das gewünschte Verhalten? Warum ist ein readOnly-Editor nicht auswählbar?

Schließlich habe ich einen einfachen Editor erstellt (Thema: Schnee und Formate: ["Hintergrund"]) und ich habe versucht, den Editor mit der folgenden Funktion zu deaktivieren und trotzdem die Bereichsfunktion nicht den ausgewählten Bereich zurückgibt.

quill.editor.enable(false); 

Wenn ich nicht die Funktion enable (false) aufrufen, funktioniert getRange() gut.

Ref Range-Funktion: quill.editor.selection.getRange();

Funktion deaktivieren: quill.editor.enable (false);

PS. Ich bin begeistert von Quill 1.0, aber das muss ich in Quill.js 0.20.1 implementieren.

Answer 1

Die Auswahl der Stiftauswahl basiert auf der Annahme, dass der Editor das aktuelle "aktive" Element ist. Aus der Perspektive des Browsers ist deaktivierter, inhaltsbearbeitbares div nicht aktiv. So können Sie, indem Sie Registerkarte Index um diese Arbeit: 1 auf, so der Browser true zurück auf „ist aktives Element“

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

Hoffnung, das hilft.