editorjs

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


Solution

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