Guides - slugcat-dev/mark-ed GitHub Wiki

Editor Attributes

To improove accessibility and control certain browser features like spellcheck, you can add HTML attributes to the editor element. Adjust these as you need.

# Accessibility
role="textbox"
aria-multiline="true"

# Spellcheck and Autocorrect
spellcheck="false"
autocorrect="off"
autocapitalize="off"

Placeholder

mark-ed uses a <div> element with contenteditable under the hood, so there is no native support for adding a placeholder text when the editor is empty, like on a textarea or input. You can fake a placeholder text with some lines of CSS and a data-placeholder attribute.

<div id="editor" data-placeholder="Write something..."></div>

.md-editor:has(> .md-line:only-child > br:only-child)::before {
  content: attr(data-placeholder);
  position: absolute;
  color: gray;
}

Make The Editor Scrollable

On its own, the editor element can not handle content overflow and just adjusts its size dynamically to the content. You can wrap the editor element and add some CSS to make it scrollable.

<div class="editor-wrapper">
  <div id="editor"></div>
</div>

.editor-wrapper {
  width: 480px;
  height: 240px;
  overflow: auto;
}

.md-editor {
  min-width: max-content;
  min-height: 100%;
}

Wrap Lines

If you want line wrapping instead of horizontal scrolling for long lines, remove min-width: max-content; from the CSS and add lineWrap: true to your editor config.