Which editor is better at pasting content? A comparison of Froala, TinyMCE, and CKEditor

Paste from 3rd party tools

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

https://froala.com/wysiwyg-editor/examples/full-featured/

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:

  1. Open Google Drive.
  2. Right-click to display the pop-up menu.
  3. Hover over the right arrow next to the Google Docs item.
  4. Select “From a template”
  5. Select the “Recipe” template from the opened template gallery.

Screenshot of the source file:

Google docs

Editors screenshot:

TinyMCE:

CKEditor:

 

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);">&nbsp;</span></p>
<p style="margin-top: 6pt; margin-bottom: 0pt;">&nbsp;</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.&nbsp;</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.&nbsp;</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.&nbsp;</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&nbsp;</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&nbsp;</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;">&nbsp;</span>
</p>
<p>
    &nbsp;
</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.&nbsp;</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.&nbsp;</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.&nbsp;</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&nbsp;</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&nbsp;</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;">&nbsp;</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;">&nbsp;consectetuer adipiscing elit sed do tempor incididunt ut labore et dolore magna aliqua.&nbsp;</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.&nbsp;</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;">&nbsp;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.&nbsp;</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:

  • The text was over the list number
  • The image was bigger than what was in the source document
HTML structure Sometimes it adds unused HTML elements like

  • Adding span and strong elements before the br
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:

word docx

 

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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:&quot;Arial&quot;,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:&quot;Arial&quot;,sans-serif;font-size:10.0pt;"><span lang="EN-GB" dir="ltr">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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:&quot;Arial&quot;,sans-serif;font-size:10.0pt;"><span lang="EN-GB" dir="ltr">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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]=&quot;January&quot;,date(0,1,1),R[0]C[-1]=&quot;February&quot;,date(0,2,1),R[0]C[-1]=&quot;March&quot;,date(0,3,1),R[0]C[-1]=&quot;April&quot;,date(0,4,1),R[0]C[-1]=&quot;May&quot;,date(0,5,1),R[0]C[-1]=&quot;June&quot;,date(0,6,1),R[0]C[-1]=&quot;July&quot;,date(0,7,1),R[0]C[-1]=&quot;August&quot;,date(0,8,1),R[0]C[-1]=&quot;September&quot;,date(0,9,1),R[0]C[-1]=&quot;October&quot;,date(0,10,1),R[0]C[-1]=&quot;November&quot;,date(0,11,1),R[0]C[-1]=&quot;December&quot;,date(0,12,1)),Date(0,3,1))" data-sheets-numberformat="{&quot;1&quot;:5,&quot;2&quot;:&quot;mmm&quot;,&quot;3&quot;:1}" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:2}">Jan</td>
<td data-sheets-formula="=date(0,MONTH(R4C[-1])+1,1)" data-sheets-numberformat="{&quot;1&quot;:5,&quot;2&quot;:&quot;mmm&quot;,&quot;3&quot;:1}" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;: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

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

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

    Hide Show