How to use @editorjs/editorjs - 10 common examples

children,
      enableReInitialize,
      tools,
      ...props
    } = this.props

    const extendTools = {
      // default tools
      paragraph: {
        class: Paragraph,
        inlineToolbar: true
      },
      ...tools
    }

    this.instance = new EditorJS({
      tools: extendTools,
      holder: 'editor-js',

      ...props
    })

    if (instanceRef) {
      instanceRef(this.instance)
    }
  }

function initEditor (props) {
      destroyEditor()

      const { holderId: holder, autofocus, initData: data, config } = props
      console.log(config)
      const tools = useTools(props, config)

      state.editor = new EditorJS({
        holder,
        autofocus,
        data,
        tools,
        onReady: () => context.emit('ready'),
        onChange: () => context.emit('change')
      })
    }

async initEditor() {
    const { holder, ...config } = this.props;
    const { handleChange } = this;

    const holderNode = !holder ? this.getHolderNode() : holder;

    this.editor = new EditorJS({
      ...config,
      holder: holderNode,
      onChange: handleChange,
    });
  }

loadData = async () => {
        const translationForLanguage = await this.getTranslationForLanguage(this.state.selectedLanguage);
        const isHTMLKey = this.props.keyResponse.data.attributes.html_enabled;

        if (isHTMLKey) {
            let htmlData;
            try {
                htmlData = JSON.parse(translationForLanguage);
            } catch (e) {
                //
            }

            this.editor = new EditorJS({
                holder: `codex-editor-${this.state.selectedLanguage}`,
                minHeight: 40,
                tools: {
                    list: {
                        class: List,
                        inlineToolbar: true
                    }
                },
                onChange: () => {
                    if (this.props.onChange) {
                        this.props.onChange(true);
                    }
                    this.setState({ editorContentChanged: true });
                },
                data: isHTMLKey ? Utils.escapeEditorContent(htmlData) : undefined
            });

EditorJsContainer.prototype.initEditor = function () {
        var _a = this.props, instanceRef = _a.instanceRef, children = _a.children, enableReInitialize = _a.enableReInitialize, props = __rest(_a, ["instanceRef", "children", "enableReInitialize"]);
        this.instance = new EditorJS(__assign({ tools: EDITOR_JS_PLUGINS, holder: 'editor-js' }, props));
        if (instanceRef) {
            instanceRef(this.instance);
        }
    };
    EditorJsContainer.prototype.destroyEditor = function () {

{
                      type: "header",
                      data: {
                          text: "你好世界...",
                          level: 1
                      }
                  },
                  {
                      type: "paragraph",
                      data: {
                          text: "..."
                      }
                  }
              ];

        this.editor = new EditorJs({
            autofocus: true,
            holders: "editorjs",
            onChange: this.handleChange,
            data: {
                blocks: blocks
            },
            tools: {
                header: {
                    class: Header,
                    shortcut: "CMD+SHIFT+H"
                },
                list: {
                    class: List,
                    shortcut: "CMD+SHIFT+L"
                },
                image: {

mounted() {
            let vm = this
            let data = this.value

            vm.editor = new EditorJS({
                holder: this.field.handle,
                placeholder: this.field.settings.placeholder || 'Add some text here...',

                data,

                minHeight: 0,

                tools: {
                    checklist: Checklist,
                    code: Code,
                    delimiter: Delimiter,
                    embed: Embed,
                    header: Header,
                    inlineCode: InlineCode,
                    link: Link,
                    list: List,

mergeMap(([action, blocks]) => {
      blocks.subscribe();
      return new SaveEnd({
        holder: action.payload.holder,
        data: {
          time: Date.now(),
          version: EditorJS.version,
          blocks: blocks
        }
      });
    })
  );

/**
   * The method to call when the editor makes a change
   */
  onChange?: (holder?: string) => void;

  /**
   * The method to call with an editor is ready
   */
  onReady?: (holder?: string) => void;
}

/**
 * Default values for each internal map
 */
export const MAP_DEFAULTS = [
  ['lastChangeMap', { time: 0, blocks: [], version: typeof EditorJS !== 'undefined' && EditorJS.version || ''}],
  ['isReadyMap', false],
  ['hasSavedMap', false]
];

/**
 * Injection token for the EditorJS class
 */
export const EDITORJS_MODULE_IMPORT = new InjectionToken('EDITORJS_MODULE_IMPORT');

/**
 * The EditorJS class injector
 */
export const EditorJSInstance = new InjectionToken('EditorJSInstance');

/**
 * Options for a Injector method