some toolbar buttons are missing (FormatUl, FormatOl)

[vijayaganthF22]

I'm working on react JS with Next js. I added Floara editor plugin. But There is showing some limited toolbar button. I need a list format icon and some paragraph formats also in toolbar button. But not able to get. Core editor only working and plugins are not working. Kindly anyone let me how to over come this issue.

`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 (

); }; `

[jaedung]

I am having the same issue.

Editor is working but plugins isn't working for toolbar.

[mlwatkins]

I'm having a similar issue

[Dakkers]

same here. @froala-bot pls help

[asp3]

same issue on 3.2.3, works fine on 3.1.0

[iamursky]

If someone have the same issue, importing all the plugins this way should help:

import { ComponentType } from "react";
import { MyComponentProps } from "react-froala-wysiwyg";
import dynamic from "next/dynamic";

import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/css/plugins/draggable.min.css";
// Don`t forget to import corresponding plugin styles

const FroalaEditor: ComponentType<MyComponentProps> = dynamic(
  async () => {
    const packages = await Promise.all([
      import("react-froala-wysiwyg"),
      import("froala-editor/js/froala_editor.pkgd.min.js"),
      import("froala-editor/js/plugins/align.min.js"),
      import("froala-editor/js/plugins/draggable.min.js"),
      // Add other plugin imports here...
    ]);

    return packages[0];
  },
  { ssr: false }
);

[Dakkers]

@amursky that seems like it would apply to nextJS only?

[iamursky]

@Dakkers, yes. I saw "next/dynamic" import in the initial question, so the solution is for Next.js.

[Dakkers]

@amursky ah ok, I didn't notice that myself. I'm not using nextJS and am having the same issue 😭

[iamursky]

@Dakkers, I guess you could try to use React.lazy instead of Next`s dynamic: https://reactjs.org/docs/code-splitting.html#import