Froala Editor Base

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/froala_editor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/plugins/table.css">

<section id="editor">
  <div id='edit' style="margin-top: 30px;">
    <h1>Resize Table</h1>

    <p>The <code>table.min.js</code> plugin also offers the possibility to resize a table in the WYSIWYG HTML editor.</p>

    <table style="width: 100%;">
      <tbody>
        <tr>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
        </tr>
        <tr>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
          <td style="width: 25%;">
            <br>
          </td>
        </tr>
      </tbody>
    </table>

    <p>There are 2 options that can be used to customize the way table resize works:</p>

    <ul>
      <li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizerOffset" title="tableResizerOffset option" target="_blank">tableResizerOffset</a> - The distance in pixels from the table cell's left or right border at which to show the resizer.
      </li>
      <li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizingLimit" title="tableResizingLimit option" target="_blank">tableResizingLimit</a> - The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged
        over this...

CSS

body {
  text-align: center;
}

section {
  width: 81%;
  margin: auto;
  text-align: left;
}

JavaScript

$(function() {

  $.FroalaEditor.DefineIcon('buttonBackground', {
    NAME: 'tint',
  });
  $.FroalaEditor.RegisterCommand('buttonBackground', {
    title: 'Button Background',
    icon: 'buttonBackground',
    focus: false,
    undo: true,
    refreshAfterCallback: false,
    callback: function(cmd, val, params) {
      //console.log (this.selection.element());
      //this.table.showColorsPopup();
    }
  });
  $('#edit').froalaEditor({
    linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove', 'buttonBackground'],
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'table', '|', 'undo', 'redo'],
    tableResizerOffset: 10,
    tableResizingLimit: 50
  })
});