如何在SLATEJS富文本编辑器中传递事件

huangapple go评论119阅读模式
英文:

How to pass events in the SLATEJS rich text editor

问题

I'm trying coding follow this doc:

https://docs.slatejs.org/walkthroughs/05-executing-commands

I just wanted to make it elegant, so I tried to separate the Toolbar Button into other files. But how do I pass the event onKeydown there?

I tried the following code, but I got the result that 'editor is undefined'

Did I overlook something?

Here is a simple DEMO:

  1. exprot function App(){
  2. //...others
  3. const [editor] = useState(() => withReact(createEditor()));
  4. return (
  5. <Slate {...props} >
  6. <MyToolbar {...editor} />
  7. //...others
  8. </Slate>
  9. );
  10. }
  11. function MyToolbar(editor: ReactEditor){
  12. return (
  13. <div>
  14. //Icon button span
  15. <span {...props} onMouseDown={event => {
  16. event.preventDefault();
  17. CustomEditor.toggleBold(editor);
  18. }}></span>
  19. </div>
  20. );
  21. }

(Note: The code appears to have some HTML encoding issues with '<' and '>' characters, which need to be corrected to make it work.)

英文:

I'm trying coding follow this doc:

https://docs.slatejs.org/walkthroughs/05-executing-commands

I just wanted to make it elegant, so I tried to separate the Toolbar Button into other files. But how do I pass the event onKeydown there?

I tried the following code, but I got the result that 'editor is undefined'

Did I overlook something?

Here is a simple DEMO:

  1. exprot function App(){
  2. //...others
  3. const [editor] = useState(() =&gt; withReact(createEditor()));
  4. return (
  5. &lt;Slate {...props} &gt;
  6. &lt;MyToolbar {...editor} /&gt;
  7. //...others
  8. &lt;/Slate&gt;
  9. );
  10. }
  11. function MyToolbar(editor: ReactEditor){
  12. return (
  13. &lt;div&gt;
  14. //Icon button span
  15. &lt;span {...props} onMouseDown={event =&gt; {
  16. event.preventDefault();
  17. CustomEditor.toggleBold(editor);
  18. }}&gt;&lt;/span&gt;
  19. &lt;/div&gt;
  20. );
  21. }

答案1

得分: 1

不要将editor作为一个属性传递,使用钩子useSlate()来获取它:

  1. import { useSlate } from "slate-react";
  2. function MyToolbar() {
  3. const editor = useSlate();
  4. return (
  5. <div>
  6. <span
  7. onMouseDown={event => {
  8. event.preventDefault();
  9. CustomEditor.toggleBold(editor);
  10. }}
  11. ></span>
  12. </div>
  13. );
  14. }
英文:

Don't pass editor as a prop, use the hook useSlate() to get it:

  1. import { useSlate } from &quot;slate-react&quot;;
  2. function MyToolbar() {
  3. const editor = useSlate();
  4. return (
  5. &lt;div&gt;
  6. &lt;span
  7. onMouseDown={event =&gt; {
  8. event.preventDefault();
  9. CustomEditor.toggleBold(editor);
  10. }}
  11. &gt;&lt;/span&gt;
  12. &lt;/div&gt;
  13. );
  14. }

huangapple
  • 本文由 发表于 2023年1月6日 11:40:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75026710.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定