March 2023 - Froala: WYSIWYG HTML Editor

From HTML to WYSIWYG: A Beginner’s Guide to Web Design

Moving from HTML to WYSIWYG

Maybe you’re a web developer with tight deadlines or maybe you’re not even a developer but would want to learn how to quickly publish on the web. Either way, you want to take advantage of WYSIWYG editors. Many traditional developers would argue that manually coding each line is still the best and quite frankly, it still is. However, if you’re in a rush that simply isn’t the best way to produce quality results. And if you’re a student who is new to web design, maybe you don’t want to fully handle coding either. And that’s okay. If you think you will be frowned upon since you use drag-and-drop functionality, at the end of the day, your clients and users wouldn’t even know how you built the website and if it looks good and optimized, then who cares how you built it. So let’s get from traditional HTML to WYSIWYG wiz!

So if you want to have a presence online, not only do you need social media, but you also need a website. Social media has tremendous perks. Despite having a presence on social media, you may not have complete control over the content you publish. The website’s owner retains the final say on what type of content is acceptable and what is not. So if you need something fully customizable for your clients, users, and investors to take your business seriously, you absolutely need a website. So let’s learn to simplify workflow with WYSIWYG editors and go from HTML to WYSIWYG.

Understanding HTML

HTML, also known as Hypertext Markup Language, is commonly utilized in websites and applications, with its greatest recognition coming from website design. HTML content consists of tags enclosed in angled brackets. Pretty simple, right? But you can do a lot with these. These tell how it will display content. This content is mostly text. However, you can further customize the text and add headings, paragraphs, images, links, forms, applications, and many more. HTML coding is very versatile in this case.

HTML is originally and traditionally written in a text editor. You can use a very simple one such as Notepad or use a sophisticated one like Visual Studio Code. Once completed, the files are saved with a .html extension so that browsers can recognize and display them on the internet.

Advantages:

Compatibility: HTML is supported by all major platforms. These are web browsers and operating systems. Thus, making it a universal language for web design.
Easy to learn: HTML is pretty straightforward. It has a simple syntax which is easy for beginners.
Flexibility: HTML can be combined with other languages and tools. Popular ones are CSS and JavaScript. These 3 are the major ones and enough to create complex web applications.
Search engine optimization (SEO): HTML is optimized for search engines like Google. This means it is easier for search engines to crawl and index pages.
Accessibility: HTML is pretty accessible to users with disabilities by adding accessibility features. These are alt tags for images and aria labels for interactive elements.

Disadvantages:

Limited interactivity: This is a static language, which means it can only create static web pages. This means it has limited interactivity. To enhance the functionality and aesthetics of HTML, it is commonly used in conjunction with CSS and JavaScript.
Limited design options: It is limited with options for design and layout. This makes it challenging to create complex designs.
Steep learning Curve: While HTML is easy to learn for basic web design, advanced features require more knowledge and experience.
Accessibility challenges: HTML can be used to create accessible web pages but it comes with its caveats. It still requires additional effort in ensuring full accessibility.

Introduction to WYSIWYG editors

A WYSIWYG HTML editor allows users to create and edit web pages visually. This means you don’t need to know HTML or CSS. So if you’re a beginner this would tremendously benefit you. It displays the web page in a simple interface. By providing a preview of the page, users can see precisely how it will appear once published. Without code knowledge, users can then edit the content by using the editor. Perhaps one of the most popular tools is the drag-and-drop feature. The color pickers and font selectors make it look like you’re just using Microsoft Word too.

Benefits of using WYSIWYG for web design:

User-friendly: They are user-friendly in that they provide a visual interface that is easy to use. Thus, making it an ideal tool for novice users with little to no coding experience.
Quick and Fast: It saves time and effort by removing the need to manually type code. This means you can create web pages quickly.
Accessible: It makes web pages more accessible. By providing tools for adding alt text to images and other multimedia elements, people with disabilities are able to appreciate the content.
Consistent: By providing templates and design elements that can be used repeatedly, these editors ensure it’s consistent across web pages. The themes and templates maintain a consistent look and feel across the website.
Customization: Customization options allow developers to modify the editor. This means if they need a certain feature, they can make sure the editor is able to do so. A lightweight customization setup is usually included on a lot of editors.

Comparison between HTML and WYSIWYG editors

Going from HTML to WYSIWYG can probably be confusing so let’s help you. Here’s a side by side comparison of both:

HTML Coding	WYSIWYG Editors
Requires coding knowledge and experience	No coding knowledge required but it does tremendously help to know at least the basics
User has complete control	Limited control over web page design and functionality Tweaking it heavily would require the user to edit the code
Depending on the user’s knowledge and expertise, the code typed will be generally optimized or will continue to be optimized by the user	Since the code is generated, it may produce unoptimized bloated code
Since the user is in complete control of the code, the user is able to add support for advanced features	Depending on which WYSIWYG editor you choose, it may not support advanced features or specific features However, some more sophisticated editors such as Froala have plugins that the user can easily install to make us of advanced features
Complete control of the code means the developer can add accessibility features to the web page	Some in-depth and specific features like accessibility on some editors are not included
Since you have to type everything manually, it can be tremendously time-consuming	Simple tasks such as changing the font or font size which can take awhile to code manually can be done within seconds
Simple human error like forgetting to end a line of code can can cause issues and having to troubleshoot them is also time-consuming	Since code is generated automatically, simple error mistakes are not a problem
Simple customization options can be a hassle but provides more customizability	Customization is a breeze but extensive customizability can be hassle
Having a consistent design is a hassle since you have to manually copy the code in each page	Themes and templates help ensure a consistent design across all the pages and these elements can be used repeatedly and easily
A blank page can be daunting for a newbie or beginner	The user-friendly interface is easy for beginners and non-technical users

Start From HTML to WYSIWYG editor Pro

To create visually appealing content quickly, even without extensive coding knowledge, getting started with a WYSIWYG editor can be an excellent option. However, choosing the right editor is crucial.

You should consider the type of content you plan to make when you choose a WYSIWYG editor. Some are better suited for web design, while others are great in other areas. Some editors offer more advanced features, while others are much more simple and geared towards beginners.

Basic features and tools to look for in a WYSIWYG editor include:

Drag-and-drop functionality: Arguably one of the favorite features of beginners. This ability saves time and simplifies the development process.
Text Editor: These tools allow users to modify text mainly. However, a lot of editors allow the modification of images, videos and other elements as well.
Pre-designed templates: Another personal favorite of mine. Pre-made templates gives you a general theme for your web page in just minutes. This is prevalent across all web pages giving uniformity and consistency.
Responsive: Everyone’s on their mobile devices nowadays. Responsive design is essential if you want your mobile users to access your pages. Most editors now have responsive temples so this should be quite easy to implement.
Tool integration: Advanced features require you to integrate your editor with other tools. Having the ability to integrate with tools like social media plugins or email marketing software can improve user experience and reach a larger audience.

Advanced techniques in WYSIWYG editors

Here are some techniques and features that can take your web design skills to go from HTML to WYSIWYG expert:

Custom Code: Custom code snippets, such as CSS, HTML, or JavaScript, that are inputted directly into the editor allows for more usability. Explore this function and you can do more even with a simple editor.
Responsive Design: Make sure that your editor is capable of designing a responsive page so it can be accessed on all devices and platforms.
Templates and Libraries: Pre-built templates and libraries make adding new features a breeze. Explore your editors library provide new functions for your website.
Code View: To further tweak your design, you can try the code view feature. For example, to incorporate programming languages such as JavaScript, editors offer a code view which allows developers to edit the code directly. Using the code view, gives developers tremendous control over the design much like traditional coding does.

Search Engine Optimization with a WYSIWYG Editor

Optimizing content for search engines like Bing and Google is essential for website ranking. No use in making the best design if no one can see it, right? So here are some tips for SEO:

Make use of descriptive text.
Header tags in structuring content improves readability.
You are not using enough subheadings.
Use alt tags for images.
Make the page load fast by optimizing the code.
External links to authoritative websites improves content quality.

Tips for successful web design with a WYSIWYG editor

Tips to keep in mind:

Plan and organize: Before you even start designing from HTML to WYSIWYG, it’s important to plan. Have at least an outline of your content. The outline will give you an idea of the structure and layout of your content.
Consistent design: Consistency is key in looking professional (even if you are not). A consistent design will make you look like an authority and your visitors will take your content seriously. Use the same fonts, colors, styles, theme and design.
Simplicity: Clutter is a no no. Keep your website simple and straight to the point. Users will then be able to find the information they need quickly and easily.
White space: Empty space is still design. It helps the user’s eyes breathe. Ever heard of minimalism? This makes your website look more organized and easier to read. If you’re not good at designing, use less and simple designs with white space. It will still look professional.
High-quality images: Images are an important part of web design as we humans are very visual. High-quality images provide more context and keep your readers engaged. JPEG is usually one of the best formats to use. PNG can be used too if you’re using images with no backgrounds. However, JPEG is the best for both quality and size.

Common mistakes to avoid:

Too much design: Is there such a thing as too much design? Yes, there is. Using too many design elements can make your website look cluttered and overwhelming. It will look unprofessional unless that’s exactly the look you’re going for.
Not Responsive: Most of us are on our phones 24/7. Heck, you’re probably reading this on your phone as well. Need I say more? Don’t ignore mobile users.
Not optimized for SEO: You probably found this website through Google. Don’t underestimate the power of search engines. Yes, social media helps in marketing products and articles such as these but a big chunk of your audience will be from search engines.
Too many different fonts and colors: Same with having too much design, sometimes too much is just too much. Your eyes need a break and intense design is useless if it breaks functionality. No point in having fancy colors and fonts if the reader can’t even read or understand what you wrote.

Conclusion

So by now you’re probably wondering so which should I use? Well both have advantages and disadvantages as we’ve previously discussed. However, you don’t have to necessarily use one or the other so you don’t have to move from HTML to WYSIWG entirely. They could be used in harmoniously together as well. Some WYSIWYG editors incorporated code view and nowadays, it’s a necessity. Here at Froala, we make content creation easy with our own WYSIWYG editor. If you want to learn how to use it, here are some quick tips to use Froala. Froala also has WYSIWYG powerful tools. So try out these editors and keep in mind the tips, common mistakes, pros and cons of it and you’ll be making your amazing website in no time!

What Is A WYSIWYG Editor? A Complete Guide

Introduction

Maybe you were scrolling on a web page and have seen the abbreviation “WYSIWYG editor” and wondered what it means. Well, I’m here to tell you exactly what it means and why you might be interested in it even more especially if you’re a developer. Basically, a WYSIWYG editor is a software tool that allows users to create and edit content visually, without needing to have a deep understanding of coding or markup languages. WYSIWYG editors are easy but may limit design control compared to manual coding. However, with that in mind, the advantages of a WYSIWYG editor might still interest you despite its downsides. So today, we will explore WYSIWYG editors, their pros and cons, and tips for using them effectively.

What Does WYSIWYG Stand For?

So what is a WYSIWYG editor? WYSIWYG stands for “What You See Is What You Get”. WYSIWYG is a term that software applications or user interfaces use to allow users to see the final output before producing, printing, or publishing it. People commonly use WYSIWYG in word processing, computer programming, desktop publishing software, and web design, among other applications.

How Does a WYSIWYG Editor Work?

The user creates and edits content visually using a WYSIWYG editor, instead of writing code or using markup languages. Here are the general steps involved in how a WYSIWYG editor works:

User Interface: The WYSIWYG editor presents a graphical user interface that is similar to what users might see in a typical word processor, with familiar tools such as formatting options, menus, and buttons for adding or manipulating images, links, tables, and other elements. Instead of typing code, the developer can use this user interface.
Real-time Content Creation: Users can create or edit content directly in the WYSIWYG editor by typing or pasting text, adding images or multimedia elements, and using formatting tools to adjust the appearance of the content. As they work, users can see the content rendered in real-time on the screen, as it will appear in the final output.
Behind the Scenes: The WYSIWYG editor operates behind the scenes to generate code or markup language (such as HTML, CSS, or XML) based on the user’s input. Developers create the final output, such as a web page or document, using this code.
Preview and Publish: Most WYSIWYG editors provide a preview mode that allows users to see how their content will look in its final form before it is published or printed. The user can publish or export the output, including the WYSIWYG-generated code, after ensuring the content and appearance are satisfactory.

Examples of Popular WYSIWYG Editors

WYSIWYG editors ease content creation and editing for non-technical users. Therefore, using one might interest you. There are many editors out there such as Froala, CKEditor, TinyMCE, Redactor, QuillJS and many more. Hopefully these could help you choose the best WYSIWYG HTML editor for your needs.

Advantages and Disadvantages of Using a WYSIWYG Editor

WYSIWYG editors have benefits in ease of use and speed but lack complexity and control. Here are the advantages and disadvantages of using a WYSIWYG editor.

Pros:

Ease of Use: One of the primary advantages of using a WYSIWYG editor is its ease of use. Users can create and edit content visually, without needing to have a deep understanding of coding or markup languages. It widens accessibility for new web or document creators.
Speed: WYSIWYG editors help users create content more quickly than if they had to write code manually. Users can create layouts and designs quickly using templates and drag-and-drop tools.
Consistency: Because the editor generates code based on user input, it can help ensure consistency across different pages or documents. Maintaining a consistent style and formatting is useful for larger projects with multiple contributors.

Cons:

Limited Customization: Though these editors are easy to use, they probably do not provide as much control as coding manually would. Developers may find it difficult to edit the code generated.
Bloated Code: The code generated could be bloated and may contain unnecessary elements. This could lead to slower web pages, which is be problematic for websites.
Compatibility Issues: Not every code generated are compatible with every platform. Users would need to test their output and make edits to make sure it is compatible.

Tips for Using a WYSIWYG Editor Effectively

Understand the Code: While you don’t need to be an expert in coding or markup languages, it’s still important to understand the basics of HTML and CSS. Having basic knowledge ease design and troubleshooting.
Use Templates: Many editors come with pre-built templates that you can use as a starting point for your project. Templates ensure consistent design and save time on multiple pages.
Use Stylesheets: Stylesheets are a powerful tool that can help you maintain consistency in the design and layout of your work. Using stylesheets defines element styles and applies them consistently across content.
Keep It Simple: While it can be tempting to add lots of flashy design elements to your content, it’s important to remember that simplicity is often best. Avoid clutter with multiple fonts, colors, or design elements.
Test and Preview: Before publishing your work, make sure to test it across multiple platforms and devices to ensure that it looks and functions as intended. Use the preview mode in your WYSIWYG editor to check that your content appears as you expect it to.

Effective use of these editors require code knowledge, use of templates, simplicity, and testing. With these tips in mind, you can create high-quality work.

Conclusion

WYSIWYG editors can be a great tool for creating and editing content quickly and easily, especially for those who are new to web design or document creation. However, WYSIWYG may not offer full control and browser/device compatibility. By understanding the code, using templates and stylesheets, keeping designs simple, and thoroughly testing aid content quality. Hopefully, this has helped you understand more about this editor and if we’ve inspired you to try it for yourself, then why don’t you try the Froala WYSIWYG HTML editor which is lightweight but can be heavily customized to your liking with our plugins.

Froala V4.0.18: Copy and Paste Images Made Better

The Froala Editor team is excited to announce the release of Froala Editor 4.0.18. This new version has a lot of improvements to quality and stability, as well as fixes for problems that customers told us about.

The 4.0.18 release provides a number of benefits for users of the editor. With the bug fixes and improvements, users will be able to edit tables, images, and other content in the editor more easily. This release also contains enhancements that aim to increase users’ productivity.

What’s New in Froala Editor V4.0.18

Refined Process of Copying and Pasting Images Inside the Froala Editor:

When you discover an image you’d like to insert in the editor, you can swiftly paste images into the editor without having to manually upload the file. Simply follow these steps:

Find the desired image.
Copy the image (right-click and select ‘Copy image’ or use keyboard shortcuts like `Ctrl+C`).
Navigate to the editor.
Paste the image directly into the editor.

This improvement streamlines the process of adding images to your content, saving you time and effort. To ensure successful uploads to your server, configure the API settings correctly:

Set the imageUpload API option to true, to enable the uploading functionality.
Set the HTTP image upload request type at the imageUploadMethod API option, by default, it is ‘PUT’.
When an image is inserted into the WYSIWYG HTML editor, AJAX requests from the editor to the server. The request is sent to the URL you defined in the imageUploadURL API option. Make sure to set this option correctly.
To store the uploaded image on your server, follow the instructions related to your server on the Froala server integration page. The Froala team also developed several SDKs to get you started on server integration faster.
After the server completes the image processing, it sends a response to the editor via the API image events, such as:
• image.uploaded event is triggered after a successful image upload request, but before inserting the image in the editor.
• image.inserted event is triggered after inserting the image into the editor.
• image.replaced event is triggered after replacing the image in the editor.
• image.error event is triggered if any errors occur during the upload process.

For more detailed information about image uploading, visit our comprehensive image upload guide.

Front-end Code Example:

<script>

  new FroalaEditor('.selector', {

    // Set the image upload parameter.
    imageUploadParam: 'image_param',

    // Set the image upload URL.
    imageUploadURL: '/upload_image',

    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,
    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],

    events: {

      'image.beforeUpload': function (images) {

        // Return false if you want to stop the image upload.

      },

      'image.uploaded': function (response) {

        // Image was uploaded to the server.

      },

      'image.inserted': function ($img, response) {

        // Image was inserted in the editor.

      },

      'image.replaced': function ($img, response) {

        // Image was replaced in the editor.

      },

      'image.error': function (error, response) {

        // Bad link.
        if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }
        // Image too text-large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.

      }

    }

  })

</script>

Refinement Table Editing

One of Froala editor’s key features is the ability to easily create and edit tables in a user-friendly manner. Through an innovative table editing popup, Froala gives you the ability to:

Add/Remove table header
Add/Remove table footer
Merge/Split cells
Add/Delete table rows
Add/Delete table columns
Apply a custom style

What’s new in this release:

In the past releases, if you inserted a column when a row contained both th and td cells, the new cell would be a th cell. Now the editor defaults to inserting td cells, as this is usually the user’s preferred option.
In the past releases, If the htmlUntouched API option is disabled, merging cells of a table with a header row will distort the cell order. This will no longer happen when you update to the latest release.
Froala Editor is known for its ability to keep the pasted content format from third-party tools such as Microsoft Word or Excel. When you paste the content into the editor, the editor asks you if you want to keep the pasted content format or not, if you select to keep the pasted content format, the pasted content styles will be preserved. Previously, adding a row or column to a pasted table could remove the table border properties. This will no longer happen when you update to the latest release.

What’s more

By upgrading to the 4.0.18 release, you will be able to:

Easily indent and outdent paragraphs using the “Tab” and “Shift + Tab“ keys respectively.
Stick the editor toolbar in the Bootstrap modal. Set the toolbarSticky API option to true to fix the editor toolbar to the top of the viewport while you scroll down.

All these improvements and more come together to make an already powerful WYSIWYG editor even better. Please find the complete changelog list here.

Get Froala V4.0.18

Since version 3.0.1, we’ve made a lot of improvements. We’ve added new features and enhanced the security of the Froala editor without making any breaking changes. This means that if you haven’t updated Froala in a while, you are missing out on a lot. If you update your editor today, which will take less than 5 minutes, you will enjoy a better editing experience that we think you’ll adore.

Updating your editor could also resolve some issues that you or your users might have had before. Don’t hesitate to update your editor today.

How Do I Upgrade to V4.0.17?

Super easy! Follow the steps below to update to the latest version.

For Froala Editor Version 3 and Version 4 Users

Follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

Method	How to download	Include in your project
CDN	–	<!-- Include Editor stylesheet--> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Include Editor JavaScript file--> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
CDN (Always the latest version)	–	<!-- Include Editor stylesheet--> <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Include Editor JavaScript file--> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
NPM	npm install froala-editor	<!-- Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g. ../css/froala_editor.pkgd.min.js --> <link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Replace the {download-folder-path} with the path to the folder containing the JS file e.g. ../js/froala_editor.pkgd.min.js --> <script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>
bower	bower install froala-wysiwyg-editor
NO Package Manager	Download Froala WYSIWYG Editor files using the download form here.
Integrated with a Framework	Select your preferred framework from 17 different popular frameworks like React, Angular, and Vue.
Other options	Check here for other options to use Froala WYSIWYG Editor in your project.

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step instructions on how to upgrade from version 2.

Try The Latest Froala Editor

Explore a variety of examples that show you the functionality in Froala HTML Editor.

If you like to see the HTML output while trying Froala, use Froala Online HTML Editor.

Change Log

Please visit the release notes for a complete list of changes.

Get Started

You can download and start using Froala in less than five minutes following our get started guide.

Support and Feedback

We’d love to hear what you think of the latest release! Join us on GitHub Community to chat with product managers, developers, and other members of the Froala team.

Technical Questions

If you have a technical question, you can check to see if we already answered it in our help center. If not, contact our Support team.

You’re helping us build a better editor

Thank you for using Froala. With your support, we’re working to make WYSIWYG editing more enjoyable, accessible, and beneficial for everyone.

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

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:

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:

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
Images	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

	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>

<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>

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>

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.

Best HTML Editor Best WYSIWYG Editor ckeditor alternative paste into editor Pasting from 3rd party tools TinyMCE alternative

Moving from HTML to WYSIWYG

Understanding HTML

Advantages:

Disadvantages:

Introduction to WYSIWYG editors

Benefits of using WYSIWYG for web design:

Comparison between HTML and WYSIWYG editors

HTML Coding

WYSIWYG Editors

Start From HTML to WYSIWYG editor Pro

Basic features and tools to look for in a WYSIWYG editor include:

Advanced techniques in WYSIWYG editors

Search Engine Optimization with a WYSIWYG Editor

Tips for successful web design with a WYSIWYG editor

Tips to keep in mind:

Common mistakes to avoid:

Conclusion

Introduction

What Does WYSIWYG Stand For?

How Does a WYSIWYG Editor Work?

Examples of Popular WYSIWYG Editors

Advantages and Disadvantages of Using a WYSIWYG Editor

Tips for Using a WYSIWYG Editor Effectively

Conclusion

What’s New in Froala Editor V4.0.18

Refined Process of Copying and Pasting Images Inside the Froala Editor:

Refinement Table Editing

What’s more

Get Froala V4.0.18

How Do I Upgrade to V4.0.17?

For Froala Editor Version 3 and Version 4 Users

For Froala Editor Version 2 Users:

Try The Latest Froala Editor

Change Log

Get Started

Support and Feedback

Technical Questions

You’re helping us build a better editor

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: