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.2.1/css/froala_editor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.2.1/css/froala_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.2.1/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

$('#edit').froalaEditor({
            inlineMode: false,
            toolbarStickyOffset: 40,
            fullPage: true,
            toolbarButtons: ['bold', 'italic', 'underline','strikeThrough', 'fontFamily', 'fontSize', 'color', 'formatBlock', 'inlineStyle', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo', 'html', 'removeFormat', 'insertButton', 'mergeTags', 'insertSocialMedia', 'fullscreen', 'selectTheme', 'previewPage'],
                        tableEditButtons: ['tableHeader', 'tableRows', '|', 'tableColumns', 'tableStyle', 'tableCells', '-', 'tableCellBackground', 'tableCellVerticalAlign', '|', 'tableCellHorizontalAlign', 'deleteContent'],
});

 var editor  = $('#edit').data('froala.editor');
editor.selection.setAtEnd(editor.$el.get(10));
editor.selection.restore();
 $('#edit').froalaEditor('events.focus');