Text

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

Enable / Disable

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

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

---

Default Values

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

Property	Default Value
text	<p style="line-height: 140%;">This is a new Text block. Change the text.</p>
textAlign	left
fontSize	16px
color	#000000
lineHeight	140%
containerPadding	10px
fontFamily	Arial, Helvetica, sans-serif

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

Default Text

unlayer.init({
  tools: {
    text: {
      properties: {
        text: {
          value:
            '<p style="line-height: 140%;">This is a new Text block. Change the text.</p>',
        },
      },
    },
  },
});

---

Font Size

unlayer.init({
  tools: {
    text: {
      properties: {
        fontSize: {
          editor: {
            defaultValue: '16px',
          },
        },
      },
    },
  },
});

---

Alignment

unlayer.init({
  tools: {
    text: {
      properties: {
        textAlign: {
          editor: {
            defaultValue: 'right',
          },
        },
      },
    },
  },
});

---

Color

unlayer.init({
  tools: {
    text: {
      properties: {
        color: {
          editor: {
            defaultValue: '#000000',
          },
        },
      },
    },
  },
});

---

Line Height

unlayer.init({
  tools: {
    text: {
      properties: {
        lineHeight: {
          editor: {
            defaultValue: '140%',
          },
        },
      },
    },
  },
});

---

Container Padding

unlayer.init({
  tools: {
    text: {
      properties: {
        containerPadding: {
          editor: {
            defaultValue: '10px',
          },
        },
      },
    },
  },
});

Font Family

unlayer.init({
  tools: {
    text: {
      properties: {
        fontFamily: {
          editor: {
            defaultValue: {
              value: "'Pacifico',cursive",
            },
          },
        },
      },
    },
  },
});

Please match exactly the value with one of those found in the font family configuration.