SunEditor插件在nextJs中不起作用

3yhwsihp 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(156)

我在使用suneditor-react插件时出现错误。我像这样导入suneditor：

import "suneditor/dist/css/suneditor.min.css"; // Import Sun Editor's CSS File
//
const SunEditor = dynamic(() => import("suneditor-react"), {
  ssr: false,
});
//
const plugins = dynamic(() => import("suneditor/src/plugins"), {
  ssr: false,
});

我使用sundEditor是这样的：编辑器工作正常，但插件不行。

const getSunEditorInstance = (sunEditor) => {
    editor.current = sunEditor;
  };
      <SunEditor
          getSunEditorInstance={getSunEditorInstance}
          lang="en"
          placeholder="Please type here..."
          autoFocus={true}
          setOptions={{
            height: "80vh",
            code: "en",
            buttonList: [
              ["undo", "redo"],
              [
                "bold",
                "italic",
                "underline",
                "strike",
                "subscript",
                "superscript",
                "fontColor",
                "hiliteColor",
                "align",
                "outdent",
                "indent",
                "list",
                "removeFormat",
              ],
              ["image", "table"],
              ["showBlocks", "codeView"],
            ],
            plugins: plugins
          }}
          setDefaultStyle="font-family: cursive; font-size:16px;"
          disable={loading}
          onChange={handleChange}
          handleImageUploadBefore={handleImageUploadBefore}
          onImageUpload={handleImageUpload}
          setContents={content}
          setAllPlugins={true}
        />

错误：当我点击任何插件像图片上传选项：see error screenshot here

next.js

来源：https://stackoverflow.com/questions/73622484/suneditor-plugins-are-not-working-in-nextjs

2条答案

按热度按时间

kokeuurv1#

import dynamic from 'next/dynamic';
const SunEditor = dynamic(() => import('suneditor-react'), {
  ssr: false
});
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const Editor = ({placeholder, value, onChange}) => {
  return (
    
      <SunEditor
        lang="en"
        height={"150px"}
        placeholder={'Type here....'}
        setOptions={{
          resizingBar: false,
          buttonList: [
            [
              'formatBlock',
              'bold',
              'underline',
              'italic',
              'strike',
              'blockquote',
              'showBlocks',
              'fontColor',
              'hiliteColor',
              'align',
              'list',
              'table',
              'link',
              'image',
              'video',
              'removeFormat'
            ]
          ]
        }}
        defaultValue={value}
        onChange={(val) => onChange(val)}
      />
  );
};

export default Editor;

赞(0）回复(0）举报 2023-06-22

pnwntuvh2#

使用类似的东西：

import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const SunEditor = dynamic(() => import("suneditor-react"), {
  ssr: false,
});

const MyComponent = props => {
  return (
    <div>
      <p> My Other Contents </p>
      <SunEditor />
    </div>
  );
};
export default MyComponent;

赞(0）回复(0）举报 2023-06-22

我来回答

SunEditor插件在nextJs中不起作用

2条答案

相关问题

热门标签

最新问答