2 years ago
#38416
farasatRehmat
I need the function to focus on a certain part of text in react-quill
I have a problem with react-quill which is a rich text editor. I need to let the quill editor focus on a specific part of a long text, e.g. a specific line or a specific sentence. There is the "focus()" method and I assume but it's not working for anybody who can help me with that. check my code if there is any issue please let me know about it. thanks
import React from 'react';
import ReactQuill from "react-quill"
import "quill-mention";
import './App.css';
import "../node_modules/react-quill/dist/quill.snow.css"
class App extends React.Component {
constructor(props) {
super(props)
this.state = { text: outside_text, received : true, focus : null,}
this.handleChange = this.handleChange.bind(this)
}
modules = {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline'],
['link', 'image'],
[{'list': 'ordered'}, {'list': 'bullet'}],
['clean']
],
}
formats = [
'header',
'bold', 'italic', 'underline',
'list', 'bullet',
'link', 'image'
]
handleChange(value) {
this.setState({ text: value})
}
handleFocus(value) {
/*to Do!*/
this.setState({focus: value})
}
activateLasers(){
this.setState({received : true });
}
checkreceived(received){
if (received===true){
this.setState({text: "Information from the button was received!",received : false })
}
}
render() {
this.checkreceived(this.state.received)
return (
<div>
<button
onClick={() => this.setState({received : true})}>
Activate Lasers !
</button>
<ReactQuill
value={this.state.text}
onChange = {this.handleChange}
modules={this.modules}
formats = {this.formats}
onFocus = {this.handleFocus}
theme = "snow"
/>
<textarea
disabled
value={this.state.text}
/>
<textarea
disabled
value={String(this.state.focus)}
/>
</div>
)
}
}
const outside_text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,'
export default App;
focus
react-quill
0 Answers
Your Answer