Which editor is better at pasting content? A comparison of Froala, TinyMCE, and CKEditor
Table of contents
- TEST #1 Google docs template (Recipe - Coral)
- Notes
- Let's take an in-depth look at the output source code:
- The HTML structure of the first four elements:
- Results:
- TEST #2 Paste from Microsoft Word (.docx file)
- Notes
- Code Analysis
- TEST #3 Paste from Microsoft Word (.docx file) (RTL text) (Arabic)
- Screenshot:
- Editors screenshots:
- Code Sample
- TEST #4 Paste from Google Sheet
- source
- Screenshot:
- Editors screenshots:
- Code sample:
- TEST #5 Paste from Microsoft Excel
- Source:
- screenshot:
- Editors screenshots:
- Conclusion:
When selecting a WYSIWYG editor, one of the most important features that you should consider is how well it preserves content from a third-party tool such as MS Word. This seemingly small detail can make all the difference, as many WYSIWYG editors fail to retain the original formatting, and others apply unnecessary markup.
Have you ever pasted content from one tool to your WYSIWYG editor only to spend more time making further adjustments? Currently, there are countless editing tools available, but some, if not most of them don’t have proper content pasting. Furthermore, editors that add unnecessary markup for the pasted content can cause slow-loading pages and a bad user experience if the code is used on the web.
If you are looking for a reliable WYSIWYG editor, you should not only peruse the features list to ensure it supports pasting from MS Word and Excel. You should also do your own testing to make sure it functions correctly. Even good editors like TinyMCE and CKeditor can have issues when it comes to pasting content from other sources.
In order to identify which editor best preserves content when pasted, we performed a test on Froala, TinyMCE, and CKeditor. We examined each editor’s compatibility with MS Word and Excel content and evaluated the results. The criteria for successful pasting included preservation of formatting, image embedding, and text encoding, among others.
In this article, we will list how we did the test and the source of files we used during this test so you can replicate it on your own if you want.
Testing environment
| Browser | Google Chrome Version 108.0.5359.125 (Official Build) (64-bit) |
|---|---|
| Device | Laptop |
| Operating system | Windows 10 |
| Editors | Froala V4.0.16 |
| TinyMCE V5.10.7
https://www.tiny.cloud/docs/tinymce/6/full-featured-premium-demo/ |
|
| CKEditor 5 V35.3.2 https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html |
TEST #1 Google docs template (Recipe – Coral)
To get the template:
- Open Google Drive.
- Right-click to display the pop-up menu.
- Hover over the right arrow next to the Google Docs item.
- Select “From a template”
- Select the “Recipe” template from the opened template gallery.
Screenshot of the source file:
Editors screenshot:
TinyMCE:
CKEditor:
![](https://froala.com/wp-content/uploads/2024/03/ck-first-min.gif")
Froala:
Notes
| TinyMCE | CKEditor | Froala | |
|---|---|---|---|
| Font style (Color, weight, font family) | ✅ | ✅ | ✅ |
| List | ✅ | Text was over the list number | ✅ |
| Image | ✅ | ✅ but bigger than the original size | ✅ |
| Columns | On all editors, the two columns appeared under each other | ||
| Notes | Spell Checker Pro automatically highlights the wrong text | A horizontal line appeared under the titles, unlike the source content. | – |
| Source code (1st paragraph) |
<p style="line-height: 1.2; margin-right: -1.5pt; margin-top: 5pt; margin-bottom: 0pt;"> <span style="font-size: 12pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);">RECIPE</span> <strong><span style="font-size: 32pt; font-family: ‘Playfair Display’, serif; color: rgb(247, 93, 93);"><br></span></strong> <strong><span style="font-size: 32pt; font-family: ‘Playfair Display’, serif; color: rgb(247, 93, 93);">Strawberry Vanilla Pancakes</span></strong></p> |
<p> <span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:12pt;">RECIPE</span> <br> <span style="background-color:transparent;color:#f75d5d;font-family:’Playfair Display’,serif;font-size:32pt;"><strong>Strawberry Vanilla Pancakes</strong></span> </p> |
<p dir="ltr" id="isPasted" style="line-height:1.2;margin-right: -1.5pt;margin-top:5pt;margin-bottom:0pt;"> <span style="font-size:12pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent; font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">RECIPE</span> <span style="font-size:32pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal; font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><br></span> <span style="font-size:32pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700; font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Strawberry Vanilla Pancakes</span></p> |
| Handling images |
<img src="blob:https://www.tiny.cloud/321557ae-cff0-4434-8c6c-6a235f8e36fe" alt="offset_355676.jpg" width="285" height="383"> |
<img src="https://lh4.googleusercontent.com/neOqCkI2SRiTQNE9HrgragD-eFGiTttIjW-3llbOjJC2FjVuCOQZeVOo-lOdiUP1MN2pA0gJ-dj71TT__L3r8PplVEsExJA26MHQIUV35gRmrPt7WNKrlG3V4ramUk8_zUwG3lmZDMGNKQWE0UZFxOFOUSprA3Fp73VodpbsBmPdcbF9TTzQyyqjRMNuqQ" alt="offset_355676.jpg"> |
<img alt="offset_355676.jpg" src="blob:https://froala.com/1f7fc308-3e97-42fa-8b5c-c0cd2041e288" width="285" height="383" class="fr-fic fr-dii"> |
Let’s take an in-depth look at the output source code:
TinyMCE
<p style="line-height: 1.2; margin-right: -1.5pt; margin-top: 5pt; margin-bottom: 0pt;"><span style="font-size: 12pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);">RECIPE</span><strong><span style="font-size: 32pt; font-family: 'Playfair Display', serif; color: rgb(247, 93, 93);"><br></span></strong><strong><span style="font-size: 32pt; font-family: 'Playfair Display', serif; color: rgb(247, 93, 93);">Strawberry Vanilla Pancakes</span></strong></p> <p style="margin-right: -1.5pt; margin-top: 24pt; margin-bottom: 24pt;"><span style="font-size: 12pt; font-family: Lato, sans-serif;"><img src="blob:https://www.tiny.cloud/539d18bf-fd81-4040-ba61-9250e5bba98c" alt="offset_355676.jpg" width="285" height="383"></span></p> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);">Ready in </span><strong><span style="font-size: 11pt; font-family: Lato, sans-serif;">20 minutes</span></strong></p> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);">Serves </span><strong><span style="font-size: 11pt; font-family: Lato, sans-serif;">8 people</span></strong></p> <p style="margin-top: 6pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; font-family: Lato, sans-serif;">280 calories</span></strong><span style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);"> </span></p> <p style="margin-top: 6pt; margin-bottom: 0pt;"> </p> <h1 style="line-height: 1.2; margin-top: 24pt; margin-bottom: 10pt;"><strong><span style="font-size: 16pt; font-family: 'Playfair Display', serif; color: rgb(247, 93, 93);">Ingredients</span></strong></h1> <ul style="margin-top: 0px; margin-bottom: 0px; padding-inline-start: 48px;"> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Lorem ipsum dolor sit amet</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Consectetuer adipiscing elit</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Suspendisse scelerisque</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Libero interdum auctor</span></p> </li> </ul> <h1 style="line-height: 1.2; margin-top: 24pt; margin-bottom: 10pt;"><strong><span style="font-size: 16pt; font-family: 'Playfair Display', serif; color: rgb(247, 93, 93);">Preparation</span></strong></h1> <ol style="margin-top: 0px; margin-bottom: 0px; padding-inline-start: 48px;"> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; color: rgb(0, 0, 0);">Lorem ipsum dolor sit amet</span></strong><span style="font-size: 11pt; color: rgb(102, 102, 102);"> consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; color: rgb(0, 0, 0);">Suspendisse scelerisque mi a mi.</span></strong><span style="font-size: 11pt; color: rgb(102, 102, 102);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed dolore eiusmod tempor.</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; color: rgb(0, 0, 0);">Vestibulum ante ipsum primis elementum</span></strong><span style="font-size: 11pt; color: rgb(102, 102, 102);">, libero interdum auctor cursus, sapien enim dictum quam.</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Phasellus vehicula nonummy nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation.</span></p> </li> <li style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(204, 204, 204); margin-left: -18pt;"> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: rgb(102, 102, 102);">Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p> </li> </ol> <h1 style="line-height: 1.2; margin-top: 24pt; margin-bottom: 0pt;"><strong><span style="font-size: 16pt; font-family: 'Playfair Display', serif; color: rgb(247, 93, 93);">Tips</span></strong></h1> <p style="margin-top: 6pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Lato, sans-serif; color: rgb(102, 102, 102);">Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span></p>
CKEditor
<p>
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:12pt;">RECIPE</span>
<br>
<span style="background-color:transparent;color:#f75d5d;font-family:'Playfair Display',serif;font-size:32pt;"><strong>Strawberry Vanilla Pancakes</strong></span>
</p>
<p>
<span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:12pt;"><img src="https://lh6.googleusercontent.com/9AwfGAuveK1iwjZFagqnianj4oCaXl0GYEBa18eEocTx8MP6YFeXdAAKAoh9yix8UBiPRzNeF04mnW8mRLanhLMtkPq7wfMUWIu6izaxh591RuS0RXe12JZpTtKA6PW6fSnqY-Zl97ITABG5JER_aqA" alt="offset_355676.jpg"></span>
</p>
<p>
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Ready in </span><span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>20 minutes</strong></span>
</p>
<p>
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Serves </span><span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>8 people</strong></span>
</p>
<p>
<span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>280 calories</strong></span><span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;"> </span>
</p>
<p>
</p>
<h2>
<span style="background-color:transparent;color:#f75d5d;font-family:'Playfair Display',serif;font-size:16pt;"><strong>Ingredients</strong></span>
</h2>
<ul>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Lorem ipsum dolor sit amet</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Consectetuer adipiscing elit</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Suspendisse scelerisque</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Libero interdum auctor</span>
</p>
</li>
</ul>
<h2>
<span style="background-color:transparent;color:#f75d5d;font-family:'Playfair Display',serif;font-size:16pt;"><strong>Preparation</strong></span>
</h2>
<ol>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>Lorem ipsum dolor sit amet</strong></span><span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;"> consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>Suspendisse scelerisque mi a mi.</strong></span><span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed dolore eiusmod tempor.</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#000000;font-family:Lato,sans-serif;font-size:11pt;"><strong>Vestibulum ante ipsum primis elementum</strong></span><span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">, libero interdum auctor cursus, sapien enim dictum quam.</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Phasellus vehicula nonummy nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation.</span>
</p>
</li>
<li>
<p style="margin-left:-18pt;">
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</p>
</li>
</ol>
<h2>
<span style="background-color:transparent;color:#f75d5d;font-family:'Playfair Display',serif;font-size:16pt;"><strong>Tips</strong></span>
</h2>
<p>
<span style="background-color:transparent;color:#666666;font-family:Lato,sans-serif;font-size:11pt;">Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span>
</p>
Froala
<p dir="ltr" id="isPasted" style="line-height:1.2;margin-right: -1.5pt;margin-top:5pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">RECIPE</span><span style="font-size:32pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><br></span><span style="font-size:32pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Strawberry Vanilla Pancakes</span></p> <p dir="ltr" style="line-height:1.38;margin-right: -1.5pt;margin-top:24pt;margin-bottom:24pt;"><span style="font-size:12pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span style="border:none;display:inline-block;overflow:hidden;width:285px;height:383px;"><img alt="offset_355676.jpg" src="blob:https://froala.com/e96befe3-4b16-4785-b631-988d87fa38bf" class="fr-fic fr-dii" width="285" height="383"></span></span></p> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Ready in </span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">20 minutes</span></p> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Serves </span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">8 people</span></p> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">280 calories</span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"> </span></p> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"> <br> </p> <h1 dir="ltr" style="line-height:1.2;margin-top:24pt;margin-bottom:10pt;"><span style="font-size:16pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Ingredients</span></h1> <ul style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"> <li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lorem ipsum dolor sit amet</span></p> </li> <li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Consectetuer adipiscing elit</span></p> </li> <li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Suspendisse scelerisque</span></p> </li> <li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Libero interdum auctor</span></p> </li> </ul> <h1 dir="ltr" style="line-height:1.2;margin-top:24pt;margin-bottom:10pt;"><span style="font-size:16pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Preparation</span></h1> <ol style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lorem ipsum dolor sit amet</span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"> consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span></p> </li> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span></p> </li> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Suspendisse scelerisque mi a mi.</span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed dolore eiusmod tempor.</span></p> </li> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Vestibulum ante ipsum primis elementum</span><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">, libero interdum auctor cursus, sapien enim dictum quam.</span></p> </li> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Phasellus vehicula nonummy nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation.</span></p> </li> <li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Lato,sans-serif;color:#cccccc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;margin-left: -18pt;"> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p> </li> </ol> <h1 dir="ltr" style="line-height:1.2;margin-top:24pt;margin-bottom:0pt;"><span style="font-size:16pt;font-family:'Playfair Display',serif;color:#f75d5d;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Tips</span></h1> <p dir="ltr" style="line-height:1.38;margin-top:6pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Lato,sans-serif;color:#666666;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua. </span></p>
The HTML structure of the first four elements:
| TinyMCE | CKEditor | Froala | |
|---|---|---|---|
| text | p>span |
p>span |
p>span |
| space | p>strong>span>br |
p>br |
p>span>br |
| text | p>strong>span |
p>span>strong |
p>span |
| Image | p>span>span>img |
p>span>img |
p>span>span>img |
Results:
| TinyMCE | CKEditor | Froala | |
|---|---|---|---|
| Does pasted content look like the source | ✅ | Some of the content didn’t look good. For example:
|
✅ |
| HTML structure | Sometimes it adds unused HTML elements like
|
Outputs the minimal HTML structure. | HTML structure contains more elements than CKEditor, but fewer than TinyMCE |
| Inline style | Add more inline styles than CkEditor but less than Froala editor | The least number of inline styles. | A lot of inline styles |
| Images | Keeps the source image size by setting the width and height attributes | Doesn’t set the width and height attributes causing incorrect image size displayed | Keeps the source image size by setting the width and height attributes |
| Imagea converted to a Binary Large Object ( BLOB ) | Imagea stored in CDN | Images converted to a Binary Large Object ( BLOB ) | |
| Notes | Popup displayed to ask if you want to keep the format or not | – | Set the dir and id=”isPasted” attributes on the <p> element |
TEST #2 Paste from Microsoft Word (.docx file)
Source: Download file from https://neoschronos.com/download/business-model-canvas/docx/
Screenshot of the source file:
Editors screenshot:
TinyMCE:
CKEditor
Froala
Notes
| TinyMCE | CKEditor | Froala |
|---|---|---|
| One of the cells has a wrong width (Very small width) | Some borders appeared which are not on the source document. | Similar to the source document |
| The table is not responsive (horizontal and vertical scrollbars appeared) | The table is responsive (resized to fit the editor width) | The table is responsive (resized to fit the editor width) |
Code Analysis
| TinyMCE | CKEditor | Froala | |
|---|---|---|---|
| Structure | table>tbody>tr>td>p>span |
figure>table>tbody>tr>td> |
table>tbody>tr>td>p>span |
| Sample code |
<td style="width: 423.037px; border-right: 1pt solid rgb(242, 242, 242); border-bottom: 1pt solid rgb(242, 242, 242); border-left: 1pt solid rgb(242, 242, 242); border-image: initial; border-top: none; background: white; padding: 0in 5.65pt 0in 5.4pt;" colspan="4" valign="top">
<p style="margin: 0in -1.6pt 0in 0in; font-size: 12pt; font-family: Cambria, serif;"><span style="font-size: 10.0pt; font-family: Arial, sans-serif; color: gray;">What are the most important costs inherent in our business model? Which Key Resources are most expensive? Which Key Activities are most expensive?<br> IS YOUR BUSINESS MORE: Cost Driven (leanest cost structure, low price value proposition, maximum automation, extensive outsourcing), Value Driven (focused on value creation, premium value proposition).<br> SAMPLE CHARACTERISTICS: Fixed Costs (salaries, rents, utilities), Variable costs, Economies of scale, Economies of scope</span></p>
</td>
|
<td style="background-color:white;border-bottom-style:solid;border-color:#F2F2F2;border-left-style:solid;border-right-style:solid;border-top-style:none;border-width:1.0pt;height:133.35pt;padding:0in 5.65pt 0in 5.4pt;vertical-align:top;width:386.8pt;" colspan="4">
<span style="color:gray;font-family:"Arial",sans-serif;font-size:10.0pt;"><span lang="EN-GB" dir="ltr">What are the most important costs inherent in our business model? Which Key Resources are most expensive? Which Key Activities are most expensive?</span></span>
<br>
<span style="color:gray;font-family:"Arial",sans-serif;font-size:10.0pt;"><span lang="EN-GB" dir="ltr"> IS YOUR BUSINESS MORE: Cost Driven (leanest cost structure, low price value proposition, maximum automation, extensive outsourcing), Value Driven (focused on value creation, premium value proposition).</span></span>
<br>
<span style="color:gray;font-family:"Arial",sans-serif;font-size:10.0pt;"><span lang="EN-GB" dir="ltr"> SAMPLE CHARACTERISTICS: Fixed Costs (salaries, rents, utilities), Variable costs, Economies of scale, Economies of scope</span></span>
</td>
|
<td colspan="4" style="width: 386.8pt;border-right: 1pt solid rgb(242, 242, 242);border-bottom: 1pt solid rgb(242, 242, 242);border-left: 1pt solid rgb(242, 242, 242);border-image: initial;border-top: none;background: white;padding: 0in 5.65pt 0in 5.4pt;height: 133.35pt;vertical-align: top;" valign="top" width="49.758919961427196%">
<p style='margin:0in;font-size:16px;font-family:"Cambria",serif;margin-right:-1.6pt;'><span style='font-size:13px;font-family:"Arial",sans-serif;color:gray;'>What are the most important costs inherent in our business model? Which Key Resources are most expensive? Which Key Activities are most expensive?<br> IS YOUR BUSINESS MORE: Cost Driven (leanest cost structure, low price value proposition, maximum automation, extensive outsourcing), Value Driven (focused on value creation, premium value proposition).<br> SAMPLE CHARACTERISTICS: Fixed Costs (salaries, rents, utilities), Variable costs, Economies of scale, Economies of scope</span></p>
</td>
|
In comparison to the other editors, Froala’s pasted content looks similar to the source content and its HTML code is shorter.
TEST #3 Paste from Microsoft Word (.docx file) (RTL text) (Arabic)
Source: https://www.graphicpear.com/resources/templates/4479/4479.zip
After extracting the archive, go to:
Download_folder\Black and Blue Unlimited Resume Template\DOCX\Arabic\
Screenshot:
Editors screenshots:
TinyMCE
CKEditor
Froala
All three editors were unable to paste the right-column images and retain the YYYY-MM-DD date format of the original document. Froala and TinyMCE pasted the left column text in the correct format, while CKEditor italicized it, contrary to the source. CKEditor also displayed some parts inaccurately e.g. “1234شارع أبجد ” and “DB100-MarMar”.
Code Sample
| TinyMCE | CKEditor | Froala |
|---|---|---|
<p dir="RTL" style="text-align: right; line-height: 80%; direction: rtl; unicode-bidi: embed; margin-right: 0in; margin-left: 0in; font-size: 12pt; font-family: 'Times New Roman', serif;"><span style="font-family: KacstLetter;">السيد الفاضل مالي،</span></p> |
<p style="text-align:right;">
<span style="font-family:KacstLetter;"><span lang="AR-SA" dir="ltr">السيد الفاضل مالي،</span></span>
</p>
|
<p dir="RTL" style='margin-right:0in;margin-left:0in;font-size:15px;font-family:"Calibri",sans-serif;margin-top:0in;margin-bottom:8.0pt;text-align:right;line-height:80%;'><span style="font-family:KacstLetter;">السيد الفاضل مالي،</span></p> |
While CKEditor sets the dir to “LTR” and aligns the text to the right using the “text-align” property, TinyMCE and Froala use a more accurate approach by setting the dir to “RTL”.
TEST #4 Paste from Google Sheet
source
https://docs.google.com/spreadsheets/d/1Ns3d2ECRhJaJgABSQ38qZfTnOHO-R-r6z7RIHSdJI5o/template/preview (Profit & Loss tab)
Screenshot:
Editors screenshots:
TinyMCE
CKEditor
CKEditor was unable to paste the content.
Froala
Froala maintains the sheet styles.
Code sample:
| TinyMCE | Froala |
|---|---|
<td data-sheets-formula="=iferror(ifs(R[0]C[-1]="January",date(0,1,1),R[0]C[-1]="February",date(0,2,1),R[0]C[-1]="March",date(0,3,1),R[0]C[-1]="April",date(0,4,1),R[0]C[-1]="May",date(0,5,1),R[0]C[-1]="June",date(0,6,1),R[0]C[-1]="July",date(0,7,1),R[0]C[-1]="August",date(0,8,1),R[0]C[-1]="September",date(0,9,1),R[0]C[-1]="October",date(0,10,1),R[0]C[-1]="November",date(0,11,1),R[0]C[-1]="December",date(0,12,1)),Date(0,3,1))" data-sheets-numberformat="{"1":5,"2":"mmm","3":1}" data-sheets-value="{"1":3,"3":2}">Jan</td>
<td data-sheets-formula="=date(0,MONTH(R4C[-1])+1,1)" data-sheets-numberformat="{"1":5,"2":"mmm","3":1}" data-sheets-value="{"1":3,"3":33}">Feb</td>
|
<td data-sheets-formula='=iferror(ifs(R[0]C[-1]="January",date(0,1,1),R[0]C[-1]="February",date(0,2,1),R[0]C[-1]="March",date(0,3,1),R[0]C[-1]="April",date(0,4,1),R[0]C[-1]="May",date(0,5,1),R[0]C[-1]="June",date(0,6,1),R[0]C[-1]="July",date(0,7,1),R[0]C[-1]="August",date(0,8,1),R[0]C[-1]="September",date(0,9,1),R[0]C[-1]="October",date(0,10,1),R[0]C[-1]="November",date(0,11,1),R[0]C[-1]="December",date(0,12,1)),Date(0,3,1))' data-sheets-numberformat='{"1":5,"2":"mmm","3":1}' data-sheets-value='{"1":3,"3":2}' style="border-bottom:1px solid #13b5ea;overflow:hidden;padding:2px 3px 2px 3px;vertical-align:middle;background-color:#13b5ea;font-family:Roboto;font-weight:bold;color:#ffffff;text-align:center;">Jan</td>
<td data-sheets-formula="=date(0,MONTH(R4C[-1])+1,1)" data-sheets-numberformat='{"1":5,"2":"mmm","3":1}' data-sheets-value='{"1":3,"3":33}' style="border-bottom:1px solid #13b5ea;overflow:hidden;padding:2px 3px 2px 3px;vertical-align:middle;background-color:#13b5ea;font-family:Roboto;font-weight:bold;color:#ffffff;text-align:center;">Feb</td>
|
TEST #5 Paste from Microsoft Excel
Source:
https://www.vertex42.com/Files/exclusive/gantt-chart_L.xlsx
screenshot:
Editors screenshots:
TinyMCE
CKEditor
Froala
Conclusion:
Ultimately, we found that Froala was the most reliable editor when it came to pasting content from third-party tools. It retained the formatting and styles for any kind of file type (documents or sheets). The output code sometimes has more inline styles, but it doesn’t have unused or unnecessary HTML elements.
TinyMCE doesn’t support Excel and Google Sheets styles. Sometimes it adds unused HTML elements to the output code.
CKEditor repeatedly displayed incorrectly pasted content and failed to paste data from Google Sheets.
It’s important to pick an editor that works properly with third-party tools. The time spent researching, testing, and verifying this feature can save hours of frustration during the development process. If you’re looking for a reliable WYSIWYG editor to protect your content, we suggest taking a closer look at Froala. Try it for free now.
Posted on March 8, 2023
No comment yet, add your voice below!