Skip to content

Easily Bring Word And Excel Data To The Web Through Powerful WYSIWYG HTML Editor

The Froala rich text editor places UI at the forefront of code editing, with over 100 features to run your high-performance applications effectively on any JS framework. It supports a wide range of client plugins including WordPress and Django to ensure your app is completely integrated with our huge selection of API tools. 

The rich text editor is available in multiple languages, providing developers with powerful tools to help them make important changes to their documents. It is also the ideal environment for previewing charts and tables by directly pasting them into the field. You can check out the demo to see it in action or customize the editor according to your preferences. 

Can you import sample data from an offline source?

In this tutorial, we will be using the Inline WYSIWYG demo editor to insert a table of data as clean text. You can collect data from anywhere online or import it through a Word/Excel file. To show how it works, let’s begin by taking statistical data from Wikipedia’s 2020 US Population Census. This table measures the change in population over the past decade for all 50 states.

The neat thing about this editor is that it can accept any number of values and lets the user decide whether to clean up the data or keep the original format. By extension, you won’t have to make your own grid or scale it to the appropriate size, given that the Froala toolbar has you covered with options for adding/splitting cells, aligning text, and more. 

Go ahead and copy the data by highlighting every row and column containing the values as shown below. Open up a new Word document or an Excel spreadsheet. When pasting the content, select Paste Special–>Text to remove the icons, leaving it in a pure text format. Then again, you could always fix the styling in the editor after it’s been imported.

That being said, it might be easier to pre populate the labels yourself rather than try to fit them into the cell. After adding the US population data into Excel, the symbols were removed and the cells resized to reveal all the values. Save a copy of the document to avoid losing it. 

Now you should be able to upload the raw data into the rich text editor. 

In this step, we’re going to import the US Population Census into the HTML editor itself. To open the inline editor, click the See Demo button on this page to test it for yourself. If you don’t have enough space, you can clear the text or delete other elements by clicking the trashcan icon. 

Remove the “double-click” text to make room for your new table. Return to your Excel file and select every cell. Copy it and right-click to paste inside the empty field. Click on Keep to retain the current format or Clean to get rid of it. 

The editor should list all 50 states along with their population differences in the adjacent rows as exact numbers and percentages. If you want to change the styling, use the toolbar to create a header or add another row/column to the table. Try aligning the values or painting the cells a different color to make it look cleaner. 

And there you have it, a collection of statistics pasted into the online editor from a Word or Excel document. If you want to save your custom datasheet, you would have to convert it into a PDF file. And to do that, you must have the print plugin enabled on the WYSIWYG editor. 

How do you export content as a PDF file from the inline editor?

Don’t let your hard work go to waste. Download a PDF copy of your Froala datasheet and store it on the cloud for maximum security. This can be done by double-clicking the inline editor to fetch the toolbar under the More Misc tab. Click Download PDF next to the print icon to complete this task. 

With that in mind, you can always import the getPDF button into your own JS field to make use of its functionality. To browse the getPDF method, refer to the Miscellaneous category of the demo. There you will see the HTML snippet coupled with its toolbar script. Copy and paste both of these into your framework and it should become visible in the console. 

When creating a new FroalaEditor environment, be sure to include the URL after the link attribute. In this case, toolbarButtons will have [‘getPDF’] as its parameter. 

If you’re interested in working with our WYSIWYG Editor, then check out the inline demo to transfer your documents online. 

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *