7

我正在尝试使用 React-Quill 文本编辑器制作一个简单的博客。我想获取 ReactQuill Editor 的值并在不同的路线上预览它。很长一段时间以来，我一直在努力实现这一目标，每次我遇到同样的问题时，羽毛笔编辑器在每次按键后都会失去焦点，并在控制台中抛出警告说addRange(): The given range is not in文档。

我观察到一件事。当我只是将道具传递给< CreateBlog />而不应用路由时，它工作得非常好。但是，一旦我将路由应用到< CreateBlog />组件以便我可以从编辑器中获取值并在不同的路由上预览它，我就开始面临这个问题。我认为 react-router 可能是造成这种行为的原因，但我无法弄清楚确切的原因及其解决方法。请帮我。我在下面附上了我的代码以供参考。

应用程序.js：

class App extends Component {

  constructor(){
    super()

    this.state = {
      title: '',
      text: ''
    }

    this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
    this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
  }

  handleBlogTextChange(value){
    this.setState({
      text: value
    })
    console.log(this.state.text)
  }

  handleBlogTitleChange(value){
    this.setState({
      title: value
    })
    console.log(this.state.title)
  }

  render(){
    return (
      <BrowserRouter>
        <div class="App">
          <Switch>
            <Route path='/createBlog' component={() => <CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /> } />
            <Route exact path='/preview' component={() => <PreviewBlog title={this.state.title} text={this.state.text} />} />
            <Redirect to='/createBlog' />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

创建博客.js：

export default class CreateBlog extends Component {

    render() {
        return (
            <>
                   ----------
                        <TextEditor text={this.props.text} handleBlogChange={this.props.handleBlogChange} />
                   ----------
            </>
        )
    }
}

文本编辑器.js：

class TextEditor extends Component {

    componentDidMount(){
        const input = document.querySelector('input[data-link]')
        input.dataset.link = 'https://google.co.in'
    }

    modules={
        toolbar: [
            [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
            [{size: []}],
            ['bold', 'italic', 'underline', 'blockquote','code-block'],
            [{'list': 'ordered'}, {'list': 'bullet'}, 
             {'indent': '-1'}, {'indent': '+1'},{'align': []}],
            ['link', 'image', 'video'],
            ['clean']
          ],
    }
    
    render() {
        return (
            <div className="editor">
                <ReactQuill theme="snow" placeholder="Enter story..." modules={this.modules} value={this.props.text} onChange={this.props.handleBlogChange} />
            </div>
        );
    }
}
4

1 回答 1

1

如果有人仍在寻找答案，这就是我修复它的方法

我删除了模块和格式道具，它起作用了

于 2021-10-05T20:16:41.173 回答