Export to Word

by Froala_marketing

HTML

<link
  href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>

<div id="editor">
  <h2
    style="box-sizing: border-box; margin: 0px; padding-top: 20px !important; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Nunito, Nunito; color: rgb(53, 53, 53); font-size: 2.61em; font-weight: 400; line-height: 1;"
  >
    Mobile Friendly
  </h2>
  <div
    style="box-sizing: border-box; margin: 50px -12px 0px; padding: 0px; display: flex; flex-wrap: wrap; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0;"
    data-pasted="true"
  >
    <div
      style="box-sizing: border-box; margin: 0px; padding: 0px 12px; position: relative; width: 647.307px; min-height: 1px; flex: 0 0 auto; max-width: 100%;"
    >
      <p
        style="box-sizing: border-box; margin: 0px 0px 1rem; padding: 0px; color: rgb(81, 81, 81);"
      >
        Froala rich text editor is the first WYSIWYG HTML editor that focused
        significant resources towards the mobile area. As a result it is
        probably the best working editor on mobile devices.
      </p>
    </div>
  </div>

  <p>
    <br />
  </p>

  <table
    style="width: 95%; height: 100px; margin: auto; border-width: 1px; border-style: solid;"
  >
    <colgroup>
      <col style="width: 33.3333%;" />
      <col style="width: 33.3333%;" />
      <col style="width: 33.3333%;" />
    </colgroup>
    <tbody>
      <tr>
        <td data-cell-padding="10" style="padding: 10px; text-align: center;">
          <h3
            style="box-sizing: border-box; margin: 0px 0px 0.5rem; padding: 0px; font-family: Nunito, Nunito; color: rgb(53, 53, 53); font-size: 1.4rem; font-weight: 500; line-height: 1.8;"
            data-pasted="true"
          >
            Mobile First
          </h3>
          <br />
        </td>
        <td data-cell-padding="10" style="padding: 10px; text-align: center;">
         ...

JavaScript

new FroalaEditor('#editor', {
  wordExportFileName: 'myfile',
  toolbarButtons: ['export_to_word', 'bold', 'italic', 'insertLink','html'],
  
  pluginsDisabled: ['track_changes', 'fontSize'],
  events: {
    'word.beforeExport': function (editorHtml) {
      // Do something here.
      // this is the editor instance.

      //console.log(editorHtml);
      editorHtml += "<div>Exported By Mostafa</div>"; 
      return editorHtml
    },
    'word.afterExport': function (editorHtml) {
      // this is the editor instance.
      this.html.set(editorHtml);
    },
  },
})