Content style

If the editor and your view page look different, writers get confused. Put your view page CSS into the writing area with contentStyle, and trim the font, size, line height and color menus to what your site uses.

createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold color',
  contentStyle: `
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    p { margin: 0 0 1em; }
    h2 { padding-bottom: 6px; border-bottom: 2px solid #333; }
  `,
  fontFamilies: [
    'Body=Georgia, serif',
    'Sans=Arial, Helvetica, sans-serif',
    'Mono=Courier New, monospace',
  ],
  fontSizes: [12, 14, 17, 20, 28],
  fontSizeUnit: 'px',
  lineHeights: [140, 160, 200],
  colors: ['#333333', '#888888', '#d6336c', '#1c7ed6', '#2b8a3e'],
});

contentStyle

The CSS string applies only inside this editor's writing area: the editor nests it in #editorId .e82-content { … }. So you can write two kinds of things.

• Plain declarations such as font-size: 17px; apply to the whole writing area.
• Rules such as p { … }, img { … } or .lead { … } apply to elements inside it.
• body { … } does nothing, since there is no body inside the writing area. Write area-wide settings as plain declarations.
• Several editors on one page don't affect each other or the rest of your site.

createEditor('#editor', {
  contentStyle: `
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
    img { max-width: 100%; }
    table td { border: 1px solid #ccc; }
  `,
});

The base text size and line height also have CSS variables. For toolbar and dialog colors see Themes.

.e82 { --e82-content-size: 17px; --e82-line: 1.6; }

Menu lists

• fontFamilies the font menu, as 'Label=CSS font stack'; without = the first font name is the label. The default list leads with Korean fonts (Pretendard, Malgun Gothic, Nanum…) and ends with Arial, Georgia, Times New Roman and Courier New. Fonts missing on the reader's computer fall back, so load web fonts on your site.
• fontSizes numbers for the size menu, in fontSizeUnit (pt by default, or px). Default: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36.
• lineHeights percentages for the line height menu. Default: 100, 130, 150, 160, 180, 200, 250. Picking one sets line-height: 160% on the paragraph.
• colors the text color palette (13 colors by default). "Custom" and recent colors stay. The floating format bar that appears over selected text uses this list for both its text and highlight palettes.

The "Default" entry at the top of each menu removes the chosen font, size or line height, falling back to contentStyle.

Saved HTML

<p style="line-height: 160%">
  <span style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #d6336c">Highlighted text</span>
</p>

Options