How do you style the basic editor? #2420

iwasherefirst2 · 2023-07-18T04:39:38Z

iwasherefirst2
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

iwasherefirst2 · 2023-12-12T13:04:23Z

iwasherefirst2
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

iwasherefirst2 · 2023-12-12T13:18:25Z

iwasherefirst2
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

How do you style the basic editor? #2420

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

How do you style the basic editor? #2420

iwasherefirst2 Jul 18, 2023

Replies: 3 comments

KhaledAylii Dec 3, 2023

iwasherefirst2 Dec 12, 2023 Author

iwasherefirst2 Dec 12, 2023 Author

iwasherefirst2
Jul 18, 2023

KhaledAylii
Dec 3, 2023

iwasherefirst2
Dec 12, 2023
Author

iwasherefirst2
Dec 12, 2023
Author