Columns

For two or three blocks side by side: a photo and its text, pros and cons. On narrow screens the columns stack without any media query.

createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | columns | undo redo',
});

How to use

• Pick 2 or 3 columns from the columns menu: the paragraph at the caret (or the selected paragraphs) goes into the first column; the others start empty.
• With the caret in a column, a bar shows above the right end: switch between 2 and 3 columns, or "No columns".
• Going from 3 to 2 moves the dropped column’s content to the end of the last remaining one. Removing columns joins the content in order and drops untouched empty lines.
• While editing, each column has a dashed outline. It is not saved.

On phones

Each column has flex: 1 1 240px, so when a column would get narrower than 240px they wrap under each other. No change to your CSS is needed.

Saved HTML

<div data-columns="2" style="display: flex; flex-wrap: wrap; gap: 24px; margin: 0.8em 0">
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>Pros</h3>…</div>
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>Cons</h3>…</div>
</div>

editor.exec('columns', '3');  // three columns (creates them outside a column set)
editor.exec('columns', '');   // remove the columns

Presets

Under ⋯ in the board and full presets.

Options