如何在Nextjs的Froala编辑器中实现图片上传按钮

Question

我要在 Nextjs 上写一个 Froala 编辑器。

我正在学习，但我无法点击图片上传按钮本身，所以我想知道问题是什么。插入图像的 byurl 部分有效，但单击上传图像不会改变任何内容。

/* eslint-disable no-return-await */
/* eslint-disable import/extensions */
import dynamic from 'next/dynamic';
import 'froala-editor/css/plugins/colors.min.css';
// import 'froala-editor/js/plugins/image.min.js';

const FroalaEditor = dynamic(
  async () => {
    const editorModule = await import('react-froala-wysiwyg');

    await Promise.all([
      import('froala-editor/js/plugins/align.min.js'),
      import('froala-editor/js/plugins/font_size.min.js'),
      import('froala-editor/js/plugins/link.min.js'),
      import('froala-editor/js/plugins/file.min.js'),
      import('froala-editor/js/plugins/files_manager.min.js'),
      import('froala-editor/js/plugins/colors.min.js'),
      import('froala-editor/js/plugins/image.min.js'),
      //   import('froala-editor/js/plugins/image_manager.min.js'),
      import('froala-editor/js/plugins/table.min.js'),
    ]);

    return editorModule;
  },
  { ssr: false }
);

export default function MyComponent({ content, setContent }) {
  const handleImageUpload = (e, editor, files) => {
    console.log(files);
    e.preventDefault();
  };

  const config = {
    pluginsEnabled: [
      'fontSize',
      'image',
      'imageManager',
      'table',
      'align',
      'colors',
      'emoticons',
      'paragraphFormat',
      'paragraphStyle',
      'quote',
      'url',
    ],
    toolbarButtons: [
      'fontSize',
      'colors',
      'bold',
      'italic',
      'underline',
      'strikeThrough',
      '|',

      'textColor',
      'backgroundColor',
      '|',

      'alignLeft',
      'alignCenter',
      'alignRight',
      '|',

      'insertImage',
      'insertTable',
      'horizon',

      '|',
      'insertHR',
      'insertFile',
      'fileM',
    ],
    fontSize: [
      '8',
      '10',
      '12',
      '14',
      '18',
      '24',
      '30',
      '36',
      '48',
      '60',
      '72',
      '96',
    ],

    fontSizeDefaultSelection: '12',
    fontFamily: {
      'Arial,Helvetica,sans-serif': 'Arial',
      'Georgia,serif': 'Georgia',
      'Impact,Charcoal,sans-serif': 'Impact',
      'Tahoma,Geneva,sans-serif': 'Tahoma',
      "'Times New Roman',Times,serif": 'Times New Roman',
      'Verdana,Geneva,sans-serif': 'Verdana',
    },
    fontFamilySelection: true,

    imageEditButtons: [
      'imageReplace',
      'imageAlign',
      'imageRemove',
      '|',
      'imageLink',
      'linkOpen',
      'linkEdit',
      'linkRemove',
      '-',
      'imageDisplay',
      'imageStyle',
      'imageAlt',
      'imageSize',
    ],
    placeholderText: 'Edit Your Content Here!',

    imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
    imageUploadMethod: 'POST',
    // Set the image upload URL.
    imageUploadURL: 'upload.php',

    imageManagerLoadURL: 'image_manager/load_images.php',
    // Set the image delete URL.
    imageManagerDeleteURL: 'delete_image.php',
    // Validation
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    // Set max image size to 10MB.
    imageMaxSize: 1024 * 1024 * 10,
    events: {
      'froalaEditor.image.beforeUpload': function () {
        console.log('digh');
      },
    },
  };

  return (
    <div>
      <FroalaEditor
        tag="textarea"
        model={content}
        onModelChange={(newContent) => setContent(newContent)}
        config={config}
      />
    </div>
  );
}

我尝试了很多不同的方法，但是当我点击时没有任何反应。

Answer 1

我的猜测是你的插件js文件没有正确加载。 要排除任何缺少的脚本或 CSS，请尝试导入全部并尝试。

import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/froala_editor.pkgd.min.js';