首页 > 解决方案 > Floara 编辑器插件(列表)按钮未在反应 js 中显示(下一个 JS)

问题描述

我正在使用 Next js 对 JS 做出反应。我添加了 Floara 编辑器插件。但是显示了一些有限的工具栏按钮。我需要一个列表格式图标和一些段落格式也在工具栏按钮中。请任何人告诉我如何解决这个问题。

    import React from "react";
import dynamic from "next/dynamic";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "font-awesome/css/font-awesome.css";
const FroalaEditor = dynamic(import("react-froala-wysiwyg"), {
  ssr: false
});

dynamic(import("froala-editor/js/froala_editor.min.js"), { ssr: false });
dynamic(import("froala-editor/js/froala_editor.pkgd.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins.pkgd.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins/lists.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins/paragraph_format.min.js"), {
  ssr: false
});
dynamic(import("froala-editor/js/plugins/paragraph_style.min.js"), {
  ssr: false
});

export const config = {
    toolbarButtons: [
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "|",
      "paragraphStyle",
      "|",
      "paragraphFormat",
      "align",
      "formatOL",
      "formatUL",
      "outdent",
      "indent",
      "quote"
    ],
    pluginsEnabled: ["align", "lists", "paragraphFormat", "paragraphStyle"],
    buttonsVisible: 12,
    charCounterMax: 1000,
    placeholderText: "",
    listAdvancedTypes: false
  };


export default ({ config, model, handleEditorChange, style }) => {
  return (
    <div style={style}>
      <FroalaEditor
        tag="textarea"
        config={config}
        model={model}
        onModelChange={handleEditorChange}
      />
    </div>
  );
};

标签: javascriptreactjsnpmnext.js

解决方案


推荐阅读