<!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/alignment/alignment.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['alignment']
});
</script>
</body>
</html>By default, the plugin has this array of alignment settings:
items: ['left', 'center', 'right', 'justify']
The editor sets these CSS for alignment like:
text-align: center
This means that in the output code a block tag with a style will look like this:
<p style="text-align: center">...</p>
Using the setting, you can specify only the values that are required:
Redactor('#entry', {
plugins: ['alignment'],
alignment: {
items: ['left', 'center']
}
});
By default, the plugin only adds its button to the toolbar. To add it to the context bar, enable the context setting:
Redactor('#entry', {
plugins: ['alignment'],
alignment: {
context: true
}
});