Editor.jsのmax-widthを変更する

概要

Editor.jsを使用する際、デフォルトでは左右に大きなマージンができます。これを解決する方法を紹介します。

方法

以下が参考になりました。

https://github.com/codex-team/editor.js/issues/1328

具体的には、以下を追加します。

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

ソースコード全体は以下です。

<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>

結果、以下のように、左右のマージンが小さくなりました。

まとめ

Editor.jsを使用する際の参考になりましたら幸いです。