Line Breaker 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">
  <table style="width: 100%;">
    <tbody>
      <tr>
        <td style="width: 25%;"></td>
        <td style="width: 25%;">
          <table style="width: 100%;">
            <tbody>
              <tr>
                <td style="width: 50%;"></td>
                <td style="width: 50%;"></td>
              </tr>
              <tr>
                <td style="width: 50%;"></td>
                <td style="width: 50%;"></td>
              </tr>
            </tbody>
          </table>
        </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>
 
  <hr/>
 
  <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>

JavaScript

new FroalaEditor('div#froala-editor', {
  toolbarButtons: ['bold', 'italic', 'emoticons'],
  emoticonsStep: 4,
  emoticonsSet: [{
    id: 'people',
    name: 'Smileys & People',
    code: '1f600',
    emoticons: [
      { code: '1f600', desc: 'Grinning face' },
      { code: '1f601', desc: 'Grinning face with smiling eyes' },
      { code: '1f602', desc: 'Face with tears of joy' },
      { code: '1f603', desc: 'Smiling face with open mouth' },
      { code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
      { code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
      { code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
      { code: '1f607', desc: 'Smiling face with halo' }
    ]
  }, {
    'id': 'nature',
    'name': 'Animals & Nature',
    'code': '1F435',
    'emoticons': [
      { code: '1F435', desc: 'Monkey Face' },
      { code: '1F412', desc: 'Monkey' },
      { code: '1F436', desc: 'Dog Face' },
      { code: '1F415', desc: 'Dog' },
      { code: '1F429', desc: 'Poodle' },
      { code: '1F43A', desc: 'Wolf Face' },
      { code: '1F431', desc: 'Cat Face' },
      { code: '1F408', desc: 'Cat' },
      { code: '1F42F', desc: 'Tiger Face' },
      { code: '1F405', desc: 'Tiger' },
      { code: '1F406', desc: 'Leopard' },
      { code: '1F434', desc: 'Horse Face' },
      { code: '1F40E', desc: 'Horse' },
      { code: '1F42E', desc: 'Cow Face' },
      { code: '1F402', desc: 'Ox' },
      { code: '1F403', desc: 'Water Buffalo' },
    ]
  }]
})