Dynamically wrap text in an anchor tag in Quilljs Error: addRange(): The given range isn't in document

Question

我想在编辑器文本中搜索任何主题标签，并将主题标签包装在锚标签中，使其成为 link。所以这个：#whatsup 会是这样的：<a href='http://help.com'>#whatsup</a>.

这是我目前所做的，它正确地修改了文本但导致了这个错误。 addRange(): The given range isn't in document 光标被移除，不允许我输入任何其他内容。

我在使用 setContents 而不是 dangerouslyPasteHTML

时遇到同样的错误

只需在代码段中键入任何井号标签值（例如 #foo），然后查看您的控制台以重现该错误。非常感谢任何帮助。

class RichEditor extends React.Component {
    constructor (props) {
        super(props)
        this.state = { 
            editorHtml: '',
            hashTags: [] 
        }
        this.modules = {
            toolbar: [
                [{ header: [1, 2, false] }],
                ['bold', 'italic', 'underline'],
                ['image', 'code-block']
              ]
        }

        this.editor = null;
        this.quillRef = null;
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange (html) {
        var blurtHashtags = this.editor.getText().match(/(?:^|\B)#[a-zA-Z][\w]{1,19}\b/g);

        if (blurtHashtags) {
            var modHtml = html.replace(blurtHashtags[0], "<a href='http://help.com'>" + blurtHashtags[0] + "</a>");
                 this.editor.clipboard.dangerouslyPasteHTML(modHtml);
        } else {
            this.setState(prevState => ({
                editorHtml: html 
            }));
        }
    }
    
    componentDidMount() {
        if (typeof this.quillRef.getEditor !== 'function') return;
        this.editor = this.quillRef.getEditor();
    }
    
    render() {
        return (
            <div>
                <ReactQuill
                    ref={(el) => { this.quillRef = el; }} 
                    onChange={this.handleChange} 
                    modules={this.modules}
                />
            </div>
        );
    }
}

ReactDOM.render( <
  RichEditor / > ,
  document.getElementById("quill")
);

<div id="quill"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react-quill@latest/dist/react-quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

Answer 1

后台发生的事情非常有趣。您在下面找到的解决方案使用 setTimeout 和 0ms 延迟来调用 dangerouslyPasteHTML 函数。

它现在按预期工作的背后原因是，从技术上讲，修改输入字段的处理程序事件中的内容并不是一个好习惯，通过添加延迟，事件循环将执行输入字段修改 - dangerouslyPasteHTML 函数 - 在处理程序事件之后。

以下代码片段解决了您的问题，请看一看：

class RichEditor extends React.Component {
    constructor (props) {
        super(props)
        this.state = { 
            editorHtml: '',
            hashTags: [] 
        }
        this.modules = {
            toolbar: [
                [{ header: [1, 2, false] }],
                ['bold', 'italic', 'underline'],
                ['image', 'code-block']
              ]
        }

        this.editor = null;
        this.quillRef = null;
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange (html) {
        const linkStart = `<a href="http://help.com" rel="noopener noreferrer" target="_blank">`;
        const linkEnd = `</a>`;

        // remove anchor tag around the hashtag value
        // in order to identify hashtag properly
        let modHtml = html.replace(linkStart, '');
        modHtml = modHtml.replace(linkEnd, '');
        const blurtHashtags = modHtml.match(/(?:^|\B)#[a-zA-Z][\w]{1,19}\b/g);

        if (blurtHashtags) {
            // rebuild link with anchor tag
            const link = `${linkStart}${blurtHashtags[0]}${linkEnd}`;
            modHtml = modHtml.replace(blurtHashtags[0], link);

            let editor = this.editor;
        
            setTimeout(() => {
                editor.clipboard.dangerouslyPasteHTML(modHtml);

                let selection = editor.getSelection();
                selection.index = modHtml.length;
                editor.setSelection(selection);
            }, 0);
        } else {
            this.setState(prevState => ({
                editorHtml: html 
            }));
        }
    }
    
    componentDidMount() {
        if (typeof this.quillRef.getEditor !== 'function') return;
        this.editor = this.quillRef.getEditor();
    }
    
    render() {
        return (
            <div>
                <ReactQuill
                    className="quill-pre"
                    ref={(el) => { this.quillRef = el; }} 
                    onChange={this.handleChange} 
                    modules={this.modules}
                />
            </div>
        );
    }
}

ReactDOM.render( <
  RichEditor / > ,
  document.getElementById("quill")
);

.quill-pre p {
  white-space: pre;
}

<div id="quill"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react-quill@latest/dist/react-quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

显然富文本编辑器在这一点上并不完美，但符合您的要求，它删除了您之前的错误消息。如果您尝试输入 test text value #wassup 那么它不会抛出任何错误消息。

此外，我还为组件中的 p 标签添加了 white-space: pre; 样式，解决了输入任何主题标签后出现的空白问题。

希望对您有所帮助！

Dynamically wrap text in an anchor tag in Quilljs Error: addRange(): The given range isn't in document

Dynamically wrap text in an anchor tag in Quilljs Error: addRange(): The given range isn't in document

javascript

reactjs

quill