Skip to main content
Version: Latest

Paragraph

Paragraph is a built-in tool so users can add text to their designs. This tool is supported for all display modes.

Enable / Disable​

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

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

Default Values​

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

PropertyDefault Value
textJson{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","text":"This is a new Paragraph block. Change the text.","type":"extended-text","version":1}],"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}
textAlignleft
fontSize14px
color#000000
lineHeight140%
containerPadding10px
fontFamilyArial, Helvetica, sans-serif

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

Default Text​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","text":"My Paragraph","type":"extended-text","version":1}],"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

Font Size​

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

Alignment​

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

Color​

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

Line Height​

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

Container Padding​

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

Font Family​

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

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