Quill: getSelection() only works after setSelection()

Created on 5 Jun 2015 · 15Comments · Source: quilljs/quill

When I try to use the API function getSelection(), it gives an error:
TypeError: quill.getSelection(...) is null
However, if I first set the selection (shows for the user)
quill.setSelection(3,5);
alert(quill.getSelection().end);
It gives no error, and displays a popup saying '5'

Source

rumanoid

Most helpful comment

It turned out that the issue was that the editor was losing focus when clicking on a custom button. This can be resolved by adding a custom format tied to a button or by calling quill.focus before quill.getSelection. A demo can be seen here

willrowe on 5 Jun 2015

👍10

All 15 comments

This is expected behavior. When getSelection returns null it means that the editor doesn't have focus and there is nothing selected. You should check to make sure that it's not null before calling anything on the return value of getSelection.

willrowe on 5 Jun 2015

Even when I have text selected, and the editor has focus, it gives this error

rumanoid on 5 Jun 2015

Can you give me steps to reproduce this on the website?

willrowe on 5 Jun 2015

quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'image-tooltip': true,
'link-tooltip': true
},
theme: 'snow'
});
alert(quill.getSelection().end);

Will give the error, using latest Quill + text selected

rumanoid on 5 Jun 2015

I set this up and had no problems getting the selection after selecting some text.

willrowe on 5 Jun 2015

I see no code for getting the selection there, could you add what you used?

rumanoid on 5 Jun 2015

I used the browser devtools to get the selection.

willrowe on 5 Jun 2015

How?

rumanoid on 5 Jun 2015

Hop on IRC channel #quilljs and I can help you out.

willrowe on 5 Jun 2015

👍10

Thanks for helping out @willrowe! Is this issue resolved then?

jhchen on 5 Jun 2015

Yes, there's no issue with Quill itself. As long as @rumanoid is satisfied it can be closed.

willrowe on 5 Jun 2015

Yes, it is good now, thanks for the help
On Jun 5, 2015 11:36 PM, "Will Rowe" [email protected] wrote:

Yes, there's no issue with Quill itself. As long as @rumanoid
https://github.com/rumanoid is satisfied it can be closed.

—
Reply to this email directly or view it on GitHub
https://github.com/quilljs/quill/issues/388#issuecomment-109446874.

rumanoid on 5 Jun 2015

when use quill.getSelection,need two condition:

editor must focus;
2.quill must be the new instance: quill = new Quill('#editor');

no need to focus when click toolbar;

guaizi149 on 7 Jun 2018

I want to set cursor to specific position but not working in my code here is the sample code I wrote any body know please update

import React, {Component} from 'react';
import ReactQuill from 'react-quill'
import "react-quill/dist/quill.snow.css";
import './App.css';

class App extends Component{
constructor(props) {
super(props);
this.state = { editorHtml: "testing" };
this.handleChange = this.handleChange.bind(this);
this.handleChangeSelection = this.handleChangeSelection.bind(this);

this.reactQuillRef = null

}

handleChange(content, delta, source, editor) {
console.log(content);
console.log(delta);
console.log(source);
console.log(editor.getSelection());
//console.log("IBM"+editor.getHTML()); // HTML/rich text
//alert(event);
//this.setState({ editorHtml: editor.getHt });
}

handleChangeSelection(e) {
console.log(e);
}

moveCursor = () => {
this.reactQuillRef.focus();

console.log(this.reactQuillRef.getEditorSelection().index);
//console.log(this.reactQuillRef);

var range = this.reactQuillRef.getEditorSelection().index;

}

render(){
return (

    <div className="text-editor">        
    <ReactQuill         
      ref={(el) => { this.reactQuillRef = el }}
      autoFocus="true"         
      onChange={this.handleChange}
      onChangeSelection={this.handleChangeSelection}
      value={this.state.editorHtml}             
      theme={"snow"} // pass false to use minimal theme
    />
    </div>
    <div className="row"><button onClick={() => this.moveCursor()}>Move Curser</button></div>
  </div>
);

}
}

export default App;