Fonts, sizes, line height

Change the font and size of selected text, and the line height of paragraphs. The menu lists can be replaced to fit your site.

createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold',
  fontSizes: [10, 12, 14, 18, 24],
  fontSizeUnit: 'px',
});

Font (fontFamily)

The default list is Pretendard, Malgun Gothic, NanumGothic, NanumMyeongjo, Gulim, Dotum, Batang, Gungsuh, Arial, Georgia, Times New Roman and Courier New. "Default font" at the top removes the font.

Each fontFamilies entry is 'Menu label=CSS font-family'. Without =, the first family name is the label.

createEditor('#editor', {
  fontFamilies: [
    'Body=Inter, sans-serif',
    'Serif=Merriweather, Georgia, serif',
    'Courier New, monospace', // label "Courier New"
  ],
});

Size (fontSize)

The default list is 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28 and 36, in pt (familiar to Korean word-processor users). Set fontSizeUnit: 'px' for pixels. Where no size is set, the box shows the rendered size in that unit.

Line height (lineHeight)

Line height applies to whole paragraphs. The defaults are 100, 130, 150, 160, 180, 200 and 250 (%); "Default" removes it.

With nothing selected

Picking a font or size with no selection applies it to what you type next.

Presets

• board (default): fontSize on the first row; fontFamily and lineHeight under ⋯ more
• full: all three on the first row
• basic, minimal: none

Saved HTML

<p style="line-height: 180%">
  <span style="font-size: 18px">18px text</span>
  <span style="font-family: Georgia, serif">Georgia</span>
</p>

To match the editing area to your view page, use contentStyle (Content style).

API

editor.exec('fontSize', '14pt');
editor.exec('fontFamily', 'Georgia, serif');
editor.exec('lineHeight', '160%');
editor.exec('fontSize', ''); // remove

Options