如何在Editor.js中添加新块

// Step 1: 引入Editor.js的库文件和样式表

import EditorJS from 'editorjs';
import './editor.css';

// Step 2: 创建一个新的块类型

class CustomBlock {
  static get isReadOnlySupported() {
    return true;
  }

  static get enableLineBreaks() {
    return true;
  }

  constructor({ data }) {
    this.data = data;
    this.wrapper = document.createElement('div');
    this.wrapper.classList.add('custom-block');
    this.wrapper.contentEditable = false;
    this.wrapper.innerHTML = this.render();
  }

  render() {
    // 创建块的结构和样式
    return `
      <div class="custom-block-content">
        <h2>${this.data.title}</h2>
        <p>${this.data.description}</p>
      </div>
    `;
  }

  renderSettings() {
    // 创建块的设置面板
    return `
      <div class="custom-block-settings">
        <label>Title:</label>
        <input type="text" class="custom-block-title" value="${this.data.title}">
        <label>Description:</label>
        <textarea class="custom-block-description">${this.data.description}</textarea>
      </div>
    `;
  }

  save() {
    // 保存块的数据
    return {
      title: this.wrapper.querySelector('.custom-block-title').value,
      description: this.wrapper.querySelector('.custom-block-description').value,
    };
  }
}

// Step 3: 在渲染函数中定义块的外观和交互方式

CustomBlock.prototype = {
  appendCallback: () => {},
  removeCallback: () => {},
  moveCallback: () => {},
  focusCallback: () => {},
  blurCallback: () => {},
};

// Step 4: 在Editor.js的配置中注册新的块类型

const editor = new EditorJS({
  tools: {
    customBlock: {
      class: CustomBlock,
      inlineToolbar: true,
    },
  },
});

// Step 5: 初始化Editor.js

editor.isReady
  .then(() => {
    console.log('Editor.js is ready');
  })
  .catch((error) => {
    console.error('Editor.js initialization error', error);
  });