Styles

Editor.js provide set of CSS-classes for common UI elements. They can be used to make design of different Tools more unified.

Base styles

block cdx-block

Inline Tools styles

inlineToolButton ce-inline-tool
inlineToolButtonActive ce-inline-tool--active

UI elements

input cdx-input
loader cdx-loader
button cdx-button

Block Settings elements

settingsButton cdx-settings-button
settingsButtonActive cdx-settings-button--active

block

Base class for Block Tool wrapper. Provide common margins and paddings between Blocks.

'cdx-block'

inlineToolButton

Style of buttons for the Inline Toolbar.

'ce-inline-tool'

inlineToolButtonActive

Modifier for active state of Inline Toolbar Button.

'ce-inline-tool--active'

input

Common style for text inputs.

'cdx-input'

You can set a placeholder for contenteditable element by adding a data-placeholder attribute:

<div contenteditable class="cdx-input" data-placeholder="Custom placeholder"> </div>

loader

Add this class to some element to show animated loader placed over the element.

'cdx-loader'

button

Common style for buttons.

'cdx-button'
<div class="cdx-button"> Button text </div>

settingsButton

Class for Block Settings buttons.

'cdx-settings-button'

settingsButtonActive

Active modifier for Block Settings buttons.

'cdx-settings-button--active'