如何从EditorJS配置宽度和高度？

Question

我已经在网站中实现了 EditorJS，一切正常。 问题是我不知道如何配置Editor JS来减少他的宽度和高度，以及如何显示在左侧对齐。

这是我实例化 EditorJS 的代码：

<!-- html -->
<div id="editorjs" name="detailed_draft"></div>

//javascript
const TOOLS = {
    list: {
        class: List,
        inlineToolbar: true
    },
    header: {
        class: Header,
        inlineToolbar: true 
    },
    underline: {
        class: Underline
    }
}

const editor = new EditorJS({
    /** 
     * Id of Element that should contain the Editor 
     */
    holder: 'editorjs',
    tools: TOOLS,
    placeholder: 'Write some Details!',
    data: obj
})

显示 EditorJS 显示的图像

Answer 1

正如您在此讨论中看到的，解决方案是覆盖 EditorJS CSS。

<style>
    .ce-block__content,
    .ce-toolbar__content {
        max-width: unset;
    }
</style>

Answer 2

Editor.js 块宽度自定义指南

本指南可帮助您为 Editor.js 块设置自定义块宽度。通过执行以下步骤，您将能够轻松修改编辑器中块的宽度。

步骤

1. 创建 CSS 文件:

   • 将其命名为

     editor.css

     。

2. 复制以下代码：

   • 将以下 CSS 代码粘贴到您的

     editor.css

     文件中。

/* 
   Example: editor.css

   This CSS controls the width of EditorJS blocks.
   You can easily adjust the width by changing the --block-width variable below.
*/

/* Set the block width (default: 780px) */
:root {
    --block-width: 780px; /* Change this value to set your desired block width */
}

/* Apply the block width to EditorJS elements */
.ce-block__content,  /* Content inside each block */
.ce-block,           /* The block wrapper */
.codex-editor__redactor, /* Main editing area */
.ce-toolbar__content { /* Toolbar content for editing */
    max-width: var(--block-width); /* Use the block width set in :root */
    width: var(--block-width); /* Apply the block width */
    margin: 0 auto; /* Center the blocks */
}

/* Adjust the toolbar position in narrow mode (optional) */
.codex-editor--narrow .ce-toolbar__actions {
    right: -40px; /* Adjust toolbar position as needed */
}