Tiptap 事件在附加到通过 props 传递到组件的编辑器时不起作用-解网

问：

我使用useEditor创建了一个编辑器。我想将事件绑定到它，以获取特定标记的活动状态，并获取 getAttributes 以获取链接 hrefs 以更新先前设置的链接的 URL。我无法将这些事件绑定到我通过道具接收该编辑器的组件中。

文件：Editor.jsx


var editor = useEditor({
    extensions: EditorExtensions,
    onUpdate({ editor }) {
      setState({
        ...state,
        json: editor.getJSON(),
        html: editor.getHTML(),
        editorTextContent: editor.state.doc.textContent,
      });
    },
  });

// passing this editor instance to toolbar down in big component
<Toolbar editor={editor} /> // relevnat part

工具栏.jsx

const Toolbar = ({ editor }) => {
  return (
    <div className="">
      <Btns.UndoBtn editor={editor} />
      <Btns.RedoBtn editor={editor} />
      <Btns.VerticalDivider />
      <Btns.BoldBtn editor={editor} />
      <Btns.ItalicBtn editor={editor} />
      <Btns.UnderlineBtn editor={editor} />
      <Btns.VerticalDivider />
    </div>

工具栏按钮.jsx


export const BoldBtn = ({ editor }) => {
  const onClick = () => editor.chain().focus().toggleBold().run();
  return (
    <IcnBtn shortcut={"Ctrl + B"} Icon={Icons.BoldIcon} onClick={onClick} />
  );
};

在工具栏按钮中，我创建了接受编辑器的不同按钮。我使用这个编辑器来更新编辑器状态、格式化文本等。这是我使用编辑器使文本加粗的一个例子，它工作得很好。我遇到的问题存在于所有其他组件中，每个组件都有一个编辑器，因此它们是相似的。BoldBtn

这就是问题所在大胆BTN

export const BoldBtn = ({ editor }) => {
  var [boldState, setBoldState] = useState(false);
  editor.on("update", ({ editor }) => {});
  editor.on("selectionUpdate", ({ editor }) => {
    var boldIsActive = editor.isActive("bold");
    setBoldState(boldIsActive);
  });

  const onClick = () => editor.chain().focus().toggleBold().run();
  return (
    <IcnBtn isActive={boldState} shortcut={"Ctrl + B"} Icon={Icons.BoldIcon} onClick={onClick} />
  );
};

onClick 中的编辑器实例运行良好> 。editor.chain().focus().toggleBold().run()

这些事件不起作用并给出以下错误editor.on()

1Cannot read properties of null (reading 'isActive')

2TypeError: Cannot read properties of null (reading 'on')

不知何故，当它们在组件内部访问时，它们是空的，并且在函数中应按应有的方式工作。我可能犯了一个非常基本的错误，我是一名移动应用程序开发人员，请为此提出任何解决方案或解决方法。谢谢。

reactjs react-native 富文本编辑器 tiptap lexicaljs

是的，它们是通常的 reactjs 组件，不附带标准库。我正在这些组件中使用命令来格式化/标记文本。我想将事件绑定到 BoldBtn 中的编辑器，类似于 onUpdate（见上文）。onUpdate 有效，但无效。这就是我试图解决的问题。谢谢。Editor.jsxeditor.on("update", ()=>{})

0赞 Tarun Kantiwal 10/17/2023

从您的代码中，我假设您只想对 IcnBtn 应用一些样式，如果文本是粗体的，则将其激活或更改它的 css，对吗？而不是这个 editor.on（“selectionUpdate”，（{ editor }） => { var boldIsActive = editor.isActive（“bold”）; setBoldState（boldIsActive）;你能试试这一行吗 var boldIsActive = editor.isActive（“bold”）;

答：

0赞 samadfullstack 10/17/2023 #1

使用 useEffect 钩子，将编辑器作为依赖传递，在 useEffect 中可以附加事件。


    export const BoldBtn = ({ editor }) => {
      var [state, setState] = useState();
      useEffect(() => {
        if (!editor) {
          console.log("No Editor");
          return;
        }
        editor.on("update", ({ editor }) => {
          var boldIsActive = editor.isActive("bold");
          setState(boldIsActive);
          console.log("boldstate", state);
        });
      }, [editor]);
    
      const onClick = () => editor.chain().focus().toggleBold().run();
      return (
        <IcnBtn
          active={state}
          shortcut={"Ctrl + B"}
          Icon={Icons.BoldIcon}
          onClick={onClick}
        />
      );
    };

上一个：Prosemirror 编辑器 DOMParser 问题

下一个：使用可重用的 tiptap-react-component 时，Tiptap-Editor 中的值不会更改

Tiptap 事件在附加到通过 props 传递到组件的编辑器时不起作用

Tiptap Events don't work when attached to an editor that is passed down to components via props

评论