Click the 'Templates' button on the toolbar to open the templates modal.
<!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/templates/templates.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['templates'],
templates: '/your-folder/templates.json'
});
</script>
</body>
</html>
Templates are prepared HTML code you can insert to the editor.
Redactor('#entry', {
templates: '/my-templates/templates.json'
});
Example of JSON:
{
"mytemplate": {
"name": "My Template",
"html": "...html code..."
},
"mytemplate2": {
"name": "My Other Template",
"html": "... html code ..."
}
}
Or you can set the JSON object directly to the setting like this:
Redactor('#entry', {
templates: {
"mytemplate": {
"name": "My Template",
"html": "... html code ..."
},
"mytemplate2": {
"name": "My Other Template",
"html": "... html code ..."
}
}
});
Redactor builds a preview of the template automatically as an html preview. But for more accurate display, you can specify a screenshot of the template with image size 100x130px:
{
"mytemplate": {
"name": "My Template",
"image": "my-templates/my-template.png",
"html": "..."
}
}
Redactor overrides content styles unless you have nostyle: true
setting enabled.
So a template can show incorrectly even if CSS template styles are present on your page where the editor is running.
That's why it's better to add styles defining the template to the page, for example like this:
<style>
/* template styles on your page */
.mytemplate p {
...
}
/* template styles for Redactor */
.rx-content .mytemplate p {
...
}
</style>
See more about overriding styles.