Select some text and click the 'Text size' button on the toolbar.
<!DOCTYPE html>
<html>
<head>
<title>Redactor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-folder/redactor.js"></script>
<script src="/your-folder/plugins/fontsize/fontsize.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['fontsize']
});
</script>
</body>
</html>By default, the plugin already has a set of sizes installed. You can set your own set this way:
Redactor('#entry', {
plugins: ['fontsize'],
fontsize: {
items: ['16px', '20px', '24px', '32px']
}
});
The plugin can work with classes. In this case font size is set as the class, not as a style.
Redactor('#entry', {
plugins: ['fontsize'],
fontsize: {
classes: ['size-20', 'size-24']
}
});
To display text sizes in the editor content, you will need to add a size style statement to the page where the editor is running, for example, like this:
.rx-content .size-20 {
font-size: 20px;
}
.rx-content .size-24 {
font-size: 24px;
}