Skip to main content

DHTMLX RichText. Changing the default typography example

Live example​

RichText lets you set the default font and size for each block type. This demo gives paragraphs a 12px size, h2 headings 18px, and every block the Tahoma font. The values are set in config and matched with CSS so the editor both knows and shows the defaults.

const widget = new richtext.Richtext("#richtext", {
    value,
    imageUploadUrl,
    defaultStyles: {
        p: {
            "font-size": "12px"
        },
        h2: {
            "font-size": "18px"
        },
        "*": {
            "font-family": "Tahoma",
        }
    }
});
<div id="richtext" style="width: 100%; height: 100%;"></div>

<style>
#richtext p {
        font-size: 12px;
    }

    #richtext h2 {
        font-size: 18px;
    }

    #richtext .wx-editor-content * {
		font-family: Tahoma;
  	}
</style>

<script>
const value = `
        <h2>Meet DHTMLX Rich Text Editor!</h2>
        <p>Create and edit text with ease! DHTMLX RichText is a powerful editor that allows you to:</p>
        <ul>
            <li>Format text: make it <b>bold</b>, <i>italic</i>, <u>underlined</u>, or <s>strikethrough</s>, choose fonts (e.g., Arial), <span style="font-size:16px;">text size</span>, <span style="color:#0066CC;">font color,</span> and <span style="color:#FFFFFF;background:#0066CC;">background color.</span></li>
            <li>Add headings of different levels (from H1 to H6) or use the Paragraph style, align text to the left, center, right, or justify, and create numbered or bulleted lists for structured content.</li>
            <li>Insert hyperlinks for navigation to external resources, add images for visual enhancement, insert horizontal lines for separation, and use subscripts (e.g., x₂) or superscripts (e.g., x²) for scientific or mathematical notation.</li>
            <li>Read and write editor content as HTML, plain text, or Markdown for flexible integration.</li>
            <li>Clear formatting from selected content with a single click.</li>
            <li>Customize the toolbar to suit your needs, adding or removing features as desired.</li>
            <li>Enjoy an adaptive design that works seamlessly on any device, including mobile.</li>
            <li>Use Undo and Redo functions to easily revert or reapply changes as needed.</li>
        </ul>
        <p><b>To learn more, read our <a href="https://docs.dhtmlx.com/richtext/">documentation</a> and check the <a href="https://snippet.dhtmlx.com/q8j4qqq9?tag=richtext">samples</a></b>.</p>
        <hr>
        <blockquote>It is very easy to get things up and running.</blockquote>
        <p><img src="https://docs.dhtmlx.com/richtext-backend/images/3490994099/i.png" style="width:415px;height:276px;"></p>
    `;

    const baseURL = "https://docs.dhtmlx.com/richtext-backend";
    const imageUploadUrl = `${baseURL}/images`;
</script>

Use case​

Use it when the editor's default look should match your app, like a house style where body text is one font and headings another. You set the defaults per block type, so paragraphs, quotes, and each heading level can carry their own font, size, and color. The "*" key sets a value for every block at once, and specific keys like p or h2 override it. To make it yours, set the block keys you care about in defaultStyles and add matching CSS for the same selectors.

How to do this in your app​

  • Set defaults per block: pass defaultStyles with keys like p, h2, and "*", each holding font-family, font-size, color, or background.
  • Cover everything with "*": the "*" key applies to all blocks; specific keys override it.
  • Add matching CSS: defaultStyles does not paint the blocks by itself. Add CSS for the same selectors (#richtext p, #richtext h2, and so on) so the styles actually render.
  • Stick to supported values: RichText recognizes a fixed set of default font families and sizes; see the defaultStyles reference for the complete list.

Good to know​

  • defaultStyles sets state, not CSS: it tells the editor what the current defaults are (so the toolbar reflects them), but you still write the CSS that renders them. That is why the demo has both.
  • There is already a default set: out of the box, blocks use Arial, with sizes like p 14px and h1 32px. You only override what you want to change.
  • font-family and font-size accept fixed options: for example fonts like Arial, Georgia, Tahoma, and Verdana, and sizes from 12px to 36px.

API reference​

Additional resources​