javascript - React-Quill 不可编辑嵌入

Question

使用反应羽毛笔。我想添加一个不可编辑的文本块，我可以创建印迹，但是如果我尝试向它添加 contenteditable=false 属性，它就不起作用。我的代码如下

import ReactQuill from 'react-quill';
import './App.scss';
import 'react-quill/dist/quill.snow.css';

import { useState, useRef } from 'react';

const Quill = ReactQuill.Quill;
const BlockEmbed = Quill.import('blots/embed');


class Mention extends BlockEmbed {
  static create(value) {
    let node = super.create(value);
    node.innerText = value;
    // node.contenteditable = false;
    node.setAttribute("contenteditable", false);
    return node;
  }
  static value(node) {
    return node.childNodes[0].textContent;
  }
}

Mention.blotName = 'label';
Mention.tagName = 'SPAN';
Mention.className = 'ql-label';
Quill.register(Mention);



function App() {
  const [value, setValue] = useState('');
  const thisEditor = useRef(null);

  const inserMention = (thisEditor) => {
    const editor = thisEditor.getEditor();
    let range = editor.getSelection();
    let position = range ? range.index : 0;
    editor.insertEmbed(position, 'label');
  }
  return (
    <div className="container bg-crow-green bg-gradient px-0">

      <div className='mt-4 border rounded'>
        <ReactQuill ref={thisEditor} theme='snow' value={value} onChange={setValue} />
        <button type="button" className="btn mt-4 btn-danger w-25" onClick={() => inserMention(thisEditor.current)}>Insert</button>
      </div>
    </div >
  );
}

export default App;

单击按钮插入，创建一个新的嵌入并将其添加到编辑器，但它是可编辑的，我不想要。另一个问题是我想引用新添加的嵌入，稍后也更改它的值，我可以使用 Parment.find() 和稍后使用格式来做到这一点，但我无法弄清楚如何在反应中做到这一点。

标签： javascriptreactjsquillreact-quill