2 years ago

#38416

test-img

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

Accepted video resources