- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Tables
Table Cell Styles
While using the table.min.js
plugin it is possible to add custom style on the selected table cell inside the WYSIWYG HTML editor.
Try it yourself:
You can define your own table cell styles using the tableCellStyles
option. This option is an Object where the key represents the class name and its value is the style name that appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.
By default you can select multiple table cell styles at a time. If you want to toggle them and allow only one style to be selected at a time use the tableCellMultipleStyles
option.
HTML
<div id="froala-editor">
<p>The classes should be defined in CSS, otherwise no changes will be visible on the table cell's appearance.</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
</tbody>
</table>
</div>
CSS
<style>
.class1 {
text-align: center;
color: red;
}
.class2 {
font-weight: 300;
font-size: 16px;
}
</style>
JAVASCRIPT
<script>
new FroalaEditor('div#froala-editor', {
// Define new table cell styles.
tableCellStyles: {
class1: 'Class 1',
class2: 'Class 2'
}
})
</script>
Related Plugin: Table