How do you style the basic editor? #2420

niels-numbers · 2023-07-18T04:39:38Z

niels-numbers
Jul 18, 2023

On the website, the content area of the editor has some shadow and stands out:

In my simple example of the editor, I just see a plain white page:

<!DOCTYPE html>
<html>
<head>
    <title>Editor.js Example</title>
</head>
<body >
<div id="editorjs" ></div>

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script>

<script>
    var editor = new EditorJS({
        holder: 'editorjs',
        tools: {
            header: Header,
            paragraph: Paragraph,
            image: {
                class: ImageTool,
                config: {
                    endpoints: {
                        byFile: 'http://localhost:8008/uploadFile',
                        byUrl: 'http://localhost:8008/fetchUrl',
                    }
                }
            }
        },
    });
</script>
</body>
</html>

Do you have some default CSS that applies a minimalistic styling, so at least the content area sticks out a little bit? When I change body bg, the content area bg changes as well.

KhaledAylii · 2023-12-03T11:11:51Z

KhaledAylii
Dec 3, 2023

There seems to be a bunch of classes in css, I just override them globally. For me I wanted the icons to be white in a dark mode and the input text as well by default to be white.

Here's my editor.css file that I globally apply

.ce-block {
  padding-left: 2px;
  padding-right: 2px;
}

.ce-toolbar__plus,
.ce-toolbar__settings-btn,
.ce-paragraph {
  color: white !important;
}
.ce-toolbar__plus:hover,
.ce-toolbar__settings-btn:hover {
  color: #333 !important;
}

0 replies

niels-numbers · 2023-12-12T13:04:23Z

niels-numbers
Dec 12, 2023
Author

Yes, I found those classes as well, but I have a hard tome to adjust them to my needs. For example,
this is how my editor looks by default:

Each line/paragraph is in its own ce-block__content, with margin-left and margin-right, to center the content.
The remaining block under the ce-block is just padding-bottom from codex-editor__redactor.

I just don't see how I can make the red area white, so its clear for the user that this is where the content goes.

0 replies

niels-numbers · 2023-12-12T13:18:25Z

niels-numbers
Dec 12, 2023
Author

I have got it now to this:

Using this:

<template>
  <div class="grid grid-cols-3  gap-5">
    <div class="col-span-2 shadow-xl">
      <div class="bg-green-100 mx-auto px-20 py-10 " id="editorjs"></div>
    </div>

    <div class="bg-yellow-100"></div>
  </div>
</template>

<style>
.codex-editor__redactor {
  padding-bottom: 0 !important; /* This will override the inline style */
}

.ce-block__content {
  background-color: white;
  padding-left: 5px;
  padding-right: 5px;
}
</style>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How do you style the basic editor? #2420

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How do you style the basic editor? #2420

Uh oh!

Uh oh!

niels-numbers Jul 18, 2023

Replies: 3 comments

Uh oh!

KhaledAylii Dec 3, 2023

Uh oh!

niels-numbers Dec 12, 2023 Author

Uh oh!

niels-numbers Dec 12, 2023 Author

niels-numbers
Jul 18, 2023

KhaledAylii
Dec 3, 2023

niels-numbers
Dec 12, 2023
Author

niels-numbers
Dec 12, 2023
Author