Overview

When using Editor.js, large margins appear on the left and right sides by default. This article introduces how to solve this issue.

Method

The following was helpful.

Is there a way to change the max-width of the editor to be 100%? · Issue #1328 · codex-team/editor.js
When I use Editor.JS i find there is always something like max-width: 650px. Is there a way to kind of turn this off and make it full-width. i.e. take up the parent container? (without having to ma...
GitHub

Specifically, add the following CSS.

.ce-block__content,
.ce-toolbar__content {
  max-width: calc(100% - 80px) !important;
}
.cdx-block {
  max-width: 100% !important;
}

The full source code is as follows.

<script setup lang="ts">
import EditorJS from "@editorjs/editorjs";
import type { OutputData } from "@editorjs/editorjs";

const blocks = ref<OutputData>({
  time: new Date().getTime(),
  blocks: [
    {
      type: "paragraph",
      data: {
        text: "大明副使蒋 　承奉すらく 、 欽差督察総制提督浙江等処軍務各衙門 、近年以来、日本各島小民、仮るに買売を以て名と為し 、 しばしば中国辺境を犯し、居民を刼掠するを因となし、旨を奉じて 、 浙江等処承宣布政使司 に議行し、本職に転行して 、 親しく貴国に詣り面議せしめん等の因あり。",
      },
    },
  ],
});

const editor = () => {
  new EditorJS({
    holder: "editorjs",
    data: blocks.value,
    onChange: async (api) => {
      blocks.value = await api.saver.save();
    },
  });
};

editor();
</script>
<template>
  <div style="background-color: aliceblue">
    <div id="editorjs"></div>

    <hljson :content="blocks" />
  </div>
</template>
<style>
.ce-block__content,
.ce-toolbar__content {
  max-width: calc(100% - 80px) !important;
}
.cdx-block {
  max-width: 100% !important;
}

pre {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

As a result, the left and right margins were reduced as shown below.

Summary

I hope this serves as a useful reference when using Editor.js.