Question

我想将tab连接到React项目中Froala内部的一个动作。

我已经按照文档the example in the docs中的示例进行操作，但是按目标键似乎没有任何作用。

我已经设置了一个code sandbox with a minimal reproduction of the problem（此代码尝试分配1键只是为了消除因重载tab键而引起的任何麻烦）。我还包括以下代码。

预期结果是在编辑器中按1将导致警报打开。我知道警报动作有效，因为我也将其连接到Froala内的按钮。

import React from "react";
import ReactDOM from "react-dom";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/js/plugins/emoticons.min.js";
import "froala-editor/js/plugins/link.min.js";
import "froala-editor/js/third_party/spell_checker.min.js";
import "froala-editor/js/plugins/url.min.js";
import Editor from "react-froala-wysiwyg";
import Froala from "froala-editor";

import "./styles.css";

Froala.RegisterCommand("alert", {
  title: "Hello",
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: () => {
    alert("Hello!");
  }
});

Froala.RegisterShortcut(49, "alert");

function App() {
  return (
    <div className="App">
      <Editor
        config={{
          shortcutsEnabled: ["alert"],
          toolbarButtons: ["alert"]
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何为Froala for React添加键盘快捷键？

0 个答案: