在react中自定义editor.js

Question

大家好，我是反应新手，我有一个项目，它基本上是一个像 Notion 这样的网站，我正在使用 editor.js，但我想为每个块添加自定义功能，例如文本大小、字体样式等。 那么这可能吗？如何实现？ 我真的没有尝试太多，我只是添加了 editor.js 并制作了一些像标题和文本这样的块。

Answer 1

是的，可以向 React 中基于 editor.js 的项目中的每个块添加文本大小、字体样式等自定义选项

以下是如何实现此目的的简化示例：

import React, { useState } from 'react';
import EditorJS from '@editorjs/editorjs';

const CustomizableEditor = () => {
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    const editorInstance = new EditorJS({
      // Initialize editor with your custom blocks and configurations
      // Refer to editor.js documentation for details
    });
    setEditor(editorInstance);

    return () => {
      if (editorInstance) {
        editorInstance.destroy();
      }
    };
  }, []);

  const handleFontSizeChange = (fontSize) => {
    // Handle font size change logic here
  };

  const handleFontStyleChange = (fontStyle) => {
    // Handle font style change logic here
  };

  return (
    <div>
      {/* UI for customizations */}
      <div>
        <label>Font Size:</label>
        <select onChange={(e) => handleFontSizeChange(e.target.value)}>
          <option value="small">Small</option>
          <option value="medium">Medium</option>
          <option value="large">Large</option>
        </select>
      </div>
      <div>
        <label>Font Style:</label>
        <select onChange={(e) => handleFontStyleChange(e.target.value)}>
          <option value="normal">Normal</option>
          <option value="italic">Italic</option>
          <option value="bold">Bold</option>
        </select>
      </div>

      {/* Editor container */}
      <div id="editorjs" />
    </div>
  );
};

export default CustomizableEditor;