Table Cell Styles in Froala WYSIWYG Editor V3

by froala

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<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

.class1 {
  text-align: center;
  color: red;
}

.class2 {
  font-weight: 300;
  font-size: 16px;
}

JavaScript

new FroalaEditor('div#froala-editor', {
  // Define new table cell styles.
  tableCellStyles: {
    class1: 'Class 1',
    class2: 'Class 2'
  }
})