Heading

Heading is a built-in tool so users can add headings to their designs. This tool is supported for both display modes: emails and web pages.

warning

TinyMCE has been deprecated. Existing headings will continue to use TinyMCE, while new headings dropped into designs will use Lexical.

Enable / Disable

Heading tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    heading: {
      enabled: false,
    },
  },
});

---

Default Values

Heading tool comes with the following default values. You can choose to change any of these.

Property	Default Value
textJson	{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Heading","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}
headingType	h1
fontFamily	{ label: 'Arial', value: 'arial,helvetica,sans-serif'}
textAlign	left
color	#000000
lineHeight	140%
containerPadding	10px

Here are a few examples on how to change these default values.

Text

unlayer.init({
  tools: {
    heading: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"This is a different heading","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

---

Alignment

unlayer.init({
  tools: {
    heading: {
      properties: {
        textAlign: {
          value: 'right',
        },
      },
    },
  },
});

---

Color

unlayer.init({
  tools: {
    heading: {
      properties: {
        color: {
          value: '#000000',
        },
      },
    },
  },
});

---

Line Height

unlayer.init({
  tools: {
    heading: {
      properties: {
        lineHeight: {
          value: '140%',
        },
      },
    },
  },
});

---

Container Padding

unlayer.init({
  tools: {
    heading: {
      properties: {
        containerPadding: {
          value: '10px',
        },
      },
    },
  },
});