CODEWITHSUNDEEP
editorjs
Pedro Miguel
Pedro Miguel

Reputation: 23

How to configure width and heigth from EditorJS?

I have implemented EditorJS in a website, and everything is working. The problem is that I don't know how to configure the Editor JS to reduce his width and height, and how to appear aligned on the left.

This is my code to instantiate 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
})

image showing the EditorJS display

Upvotes: 2

Views: 4459

Answers (2)

Nitin Kumar
Nitin Kumar

Reputation: 1

Editor.js Block Width Customization Guide

This guide helps you set up a custom block width for your Editor.js blocks. By following the steps below, you'll be able to easily modify the width of the blocks in your editor.

Steps

  1. Create a CSS File:

    • Name it editor.css.

  2. Copy the Code Below:

    • Paste the following CSS code into your editor.css file.
/* 
   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 */
}

Upvotes: -1

Pedro Silva
Pedro Silva

Reputation: 193

As you can see on this discussion the solution is to override the EditorJS CSS.

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

Upvotes: 3

Related Questions