A Pro’s Guide to Froala’s Word and Excel Pasting

Froala Pasting plugin

Need an easy way to send Word and Excel content in your forms or messaging apps? Want to create an app compatible with Word and Excel?

Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.

 

 

Froala Pasting pluginWhy should you consider Froala for online document editor applications?

Froala will save your time and effort by providing an easy and intuitive way to implement your online document application. To make the Froala WYSIWYG editor user interface look like an online documents editor, you simply need to set the documentReady Froala API option to true. By doing this:

  • Froala will display only the most frequently used toolbar buttons for editing documents.
  • Froala reorder toolbar buttons to provide the best document editing experience.
  • The editing area’s default height will be increased to resemble a typical A4 document.

If you don’t like the defaults, With Froala editor, you can change the theme, add more toolbar buttons, customize the buttons’ order, and extend functionality with custom plugins.

Is Froala editor compatible with Word and Excel?

Froala editor is compatible with Microsoft Word documents and Excel sheets. This enables the smooth transfer of content, retaining the same format, between these applications. This is made possible by Froala’s enhanced Microsoft Word and Excel Pasting Plugin, also called the Word Paste plugin.

Word content contained an excessive amount of unnecessary markup, making implementation of this feature challenging. Moreover, important information that doesn’t come as HTML has to be parsed and converted appropriately for the browser to render it.

As a leading WYSIWYG editor, the Froala team accepted this challenge and worked hard to support Word markup. Furthermore, when Word images are pasted into the editor, we process them and upload them to your server in the same way as regular images.

In our comparisons with other WYSIWYG editors such as TinyMCE and CKEditor, we found that Froala preserved the original formatting of the content pasted from Microsoft Word and Excel better than any other editor.

Configuring Froala’s Enhanced Microsoft Word and Excel Pasting Plugin

With Froala’s Enhanced Microsoft Word and Excel Pasting Plugin, copying and pasting content from Microsoft Word or Excel into a WYSIWYG editor is easy and streamlined. It includes several options and events for customizing it to best suit your application. Let’s explore its configurations further.

Options

wordPasteModal

Set whether you want to display a modal to choose if you want to keep the pasted style or not.

wordPasteKeepFormatting

If you choose to not display the modal, you can specify here whether the editor will keep the pasted styles or not. By default, the editor will keep the styles.

wordDeniedTags

An array of HTML tags that will be removed altogether with their content when pasting content into the rich text editor from Word. For example, to remove links from the pasted content set this option to

new FroalaEditor('.selector', {

wordDeniedTags: ['a']

});

wordDeniedAttrs

An array of HTML attributes to be removed altogether with their content when pasting content into the rich text editor from Word. For example, to remove the id of the pasted elements set this option as

new FroalaEditor('.selector', {

wordDeniedAttrs: ['id']

});

wordAllowedStyleProps:

An array contains the allowed CSS properties to be used for tags when pasting from Word. by default it is set to allow the following properties

['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color', 'padding', 'margin', 'height', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'text-decoration', 'font-weight', 'font-style', 'text-indent', 'border', 'border-.*']

Note: The Froala API offers additional options related to pasting content. These can impact how content is pasted from Word documents too. For instance, if you set the pastePlain API option to true, all pasted content is cleaned, regardless of the value of wordPasteKeepFormatting.

Let’s look at the other pasting options that affect pasting content whether it is from Word or other sources.

pastePlain

Indicates whether the rich text editor should strip formatting when pasting content or not. In both cases, the content structure is preserved. It is set to ‘false‘ by default. This keeps the text formatting.

new FroalaEditor('.selector', {

  pastePlain: true

});

Other options

The other options pasteDeniedTags, pasteDeniedAttrs, and pasteAllowedStyleProps are similar to wordDeniedTags, wordDeniedAttrs, and wordAllowedStyleProps respectively but they affect the content copied from any sources. 

 

Events

Events are callback functions that are triggered during the paste process. You can customize the editor’s behavior by handling these events in your application’s logic.  In this section, we will explore all the events related to pasting content as each one is critical for customizing the process.

paste.before

This event occurs before the paste action is performed. This lets you modify pasted content before it’s inserted into the editor or add custom logic.

 new FroalaEditor('.selector', {
   events: {

    'paste.before': function (original_event) {

      // Do something here.

      // this is the editor instance.

      console.log(this);

    }

  }

});

You will receive the jQuery event object for the paste event (original_event) as the first parameter. 

For example, if we paste this “Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.“ into the editor, the first argument will be 

{

paste: { target: p, clipboardData: DataTransfer }

bubbles: true

cancelBubble: false

cancelable: true

clipboardData: DataTransfer { dropEffect: "none", effectAllowed: "uninitialized", mozCursor: "auto", … }

composed: true

currentTarget: null

defaultPrevented: true

​eventPhase: 0

explicitOriginalTarget: <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true" contenteditable="true">

isTrusted: true

originalTarget: <p>

returnValue: false

srcElement: <p>

target: <p>

timeStamp: 114314

type: "paste"

<get isTrusted()>: function isTrusted()

<prototype>: ClipboardEventPrototype { clipboardData: Getter, … }

}

paste.beforeCleanup (clipboard_html)

The event is triggered after the content has been pasted into the Froala Rich Text Editor but before any clean action is performed.

new FroalaEditor('.selector', {

  events: {

    'paste.beforeCleanup': function (clipboard_html) {

      // Do something here.

      // this is the editor instance.

      console.log(this);

    }

  }

});

In this event, you will receive the clipboard-pasted HTML (clipboard_html) string as the first parameter.

For example, if we paste this “Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.“ into the editor, the first argument will be:

  • In case you copied it from not Word document
<html><body>

<!--StartFragment-->Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.<!--EndFragment-->
</body>
</html>
  • In case you copy it from a Word document
<html xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<meta name=ProgId content=Word.Document>

<meta name=Generator content="Microsoft Word 15">

<meta name=Originator content="Microsoft Word 15">

<link rel=File-List

href="file:///C:/Users/mostafa/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">

<!--[if gte mso 9]><xml>

 <o:OfficeDocumentSettings>

  <o:AllowPNG/>

 </o:OfficeDocumentSettings>

</xml><![endif]-->

<link rel=themeData

href="file:///C:/Users/mostafa/AppData/Local/Temp/msohtmlclip1/01/clip_themedata.thmx">

<link rel=colorSchemeMapping

href="file:///C:/Users/mostafa/AppData/Local/Temp/msohtmlclip1/01/clip_colorschememapping.xml">

<!--[if gte mso 9]><xml>

 <w:WordDocument>

  <w:View>Normal</w:View>

  <w:Zoom>0</w:Zoom>

  <w:TrackMoves/>

  <w:TrackForma…

Note: you can modify the pasted content by returning a new string.

paste.afterCleanup (clipboard_html)

The event is triggered after the content has been pasted into the Froala Rich Text Editor and cleaned up. The pasted content will be replaced with the returned string if one is returned. This allows users to manipulate the pasted content before it becomes a part of the editor’s content.

new FroalaEditor('.selector', {

  events: {

    'paste.afterCleanup': function (clipboard_html) {

      // Do something here.

      // this is the editor instance.

      console.log(this);

     // Return modified clipboard_html if needed.

      return clipboard_html;

    }

  }

});

You will receive the cleaned HTML as the first parameter.

For example, if we paste this “Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.“ into the editor, the first argument will be:

  • In case you choose to clean the content
<p>Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.</p>
  • In case you choose to not clean the content
<p style="margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:&quot;Calibri&quot;,sans-serif;">Froala WYSIWYG editor is an easy yet powerful solution for reaching your goals.</p>

paste.after

This event is triggered after the paste action has been processed and the content has been inserted into the editor. It allows you to perform additional actions once the paste is complete. It doesn’t have any parameters.

new FroalaEditor('.selector', {

  events: {

    'paste.after': function () {

      // Do something here.

      // this is the editor instance.

      console.log(this);

    }

  }

});

Paste Images from Word

Froala uploads images pasted from Word just like regular images. Since there are no specific API options or events for this, the pasting image process can be customized using general API options and events.

Image paste Options

pasteAllowLocalImages

Removes images that have a local path (file://) on paste. Enabling this option might result in having mixed content on HTTPS websites.

new FroalaEditor('.selector', {

  pasteAllowLocalImages: true

});

 imagePaste

Allows pasting images from clipboard.

new FroalaEditor('.selector', {

  imagePaste: false

});

imagePasteProcess

Use default image settings for pasted images.

new FroalaEditor('.selector', {

  imagePasteProcess: true

});

Image paste Events

image.beforePasteUpload (img)

Triggered before uploading a pasted image from clipboard to the server. The first parameter is the DOM element representing the image to be uploaded.

Note: Returning false in the handler assigned to the event will cancel the current action.

new FroalaEditor('.selector', {

  events: {

    'image.beforePasteUpload': function (img) {

      // Do something here.

      // this is the editor instance.

      console.log(this);

    }

  }

});

Demo

Take a look at the browser console to see the event results after pasting some content in the demo below

Conclusion

Implementing an online documents editor, such as Froala Editor is a powerful, time-saving solution. By properly configuring the editor, and adding the enhanced Microsoft Word and Excel Pasting Plugin, you can make it easier for users to compose and edit content in familiar formats, No more hassle of having to reformat text, lists, tables, and images copied from Word or Excel files. If you find anything that you believe should work differently, just reach our engineering team and we’ll get it solved.

Overall, Froala is an excellent solution for building online documents, creating messaging applications, or any form that requires rich text editing capabilities with a modern and intuitive user interface. Give the Froala Editor a try today and elevate your document editor game!

Posted on April 10, 2023

Mostafa Yousef

Senior web developer

No comment yet, add your voice below!


Add a Comment

Your email address will not be published.