The Best Kept Secrets About A TinyMCE Alternative

Are you a developer and stuck while building or making changes to a site? Are you fed up and looking for a TinyMCE alternative free WYSIWYG HTML editor? There are plenty of similar editors available on the market. But what is the best-kept secret when it comes to WYSIWYG HTML editors? Which HTML editor has the best tools?

In this post, you will find why is Froala the best TinyMCE alternative and learn its best-kept secrets?

Why TinyMCE Alternative?

Once, TinyMCE HTML editor [1] was considered an excellent tool that provided value for money. Lately, however, TinyMCE has lost its glamour. Somewhere along the way, it became difficult to deal with. In many ways it ticks all the right boxes — it is open-source, supports several platforms, and allows customization. On the other hand, however, it is expensive, and its operating costs are not transparent. It is also crash-prone and unstable in certain conditions. As a result, it is no longer as light and smooth as before.

Developers need a flexible, smooth, and lightweight solution. In short, they want a dependable editor. They want an editor that supports many platforms and contains useful tools while providing a productive user experience. While TinyMCE can’t check all these boxes, Froala can. Froala lacks TinyMCE’s flaws and brings even more to the table.

Why Froala as TinyMCE Alternative?

According to G2 [2], Froala is the best lightweight WYSIWYG HTML editor. It is JavaScript-based with built-in rich text capabilities and extensions via Froala’s API and server-side SDKs. It is also modern and makes it appealing to users who want to complete their projects quickly. Froala is one of the best WYSIWYG HTML editors because of its unique, real-time collaborative editing feature. Thanks to its detailed documentation and robust framework plugins with many practical examples, Froala seamlessly integrates with existing technological infrastructure. This makes it perfect as a TinyMCE alternative jQuery (among other libraries and frameworks) editor.

What are the Best Kept Secrets about Froala as a TinyMCE Alternative?

 

# 1. Do You Know about the Sticky Toolbar for Convenient Editing?

By default, the Froala editor’s Toolbar remains at the top of the screen while you scroll down the page. This gives you quick access to necessary tools and makes the editing process easier. Here is the editing toolbar in Froala:

How can I Enable the Sticky Toolbar in Froala?

Enabling the Froala sticky toolbar is simple. First, go to your HTML file and create a container for the Froala editor, then add this code:

<div id="froala-editor">
  <p>In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page.</p>
  <p><strong>Dummy text to enable scroll.</strong></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.</p>
</div>

Second, go to your JavaScript file and add the lines:

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarSticky: false
  })
</script>

Make sure to set the toolbarSticky field to true.

Done!

# 2. Do You Know to Use Froala’s Document Ready Mode to Turn It into an Online Document Editor?

When you enable document ready mode, the Froala WYSIWYG HTML Editor sets the best options for creating online documents by default. This is what it looks like in Froala:

How can I Enable Document Ready Mode in Froala?

First off, go to your HTML file and add a container for the Froala editor:

<p>By enablind the document mode, the Froala WYSIWYG HTML Editor sets by default the best options for creating online documents. After editing the content, the print and export as PDF buttons are perfect so you to take the content and use it further just as you'd do with any Word processor such as Microsoft Word or Google Docs.</p>
<div id="froala-editor"></div>

Then, go to your CSS file and add these lines:

<!-- Include all Editor plugins CSS style. -->
<link rel="stylesheet" href="../css/froala_editor.pkgd.min.css">

After that, go to your JavaScript file, then insert these lines:

<!-- Include all Editor plugins JS files. -->
<script type="text/javascript" src="../js/froala_editor.pkgd.min.js"></script>

<!-- Include PDF export JS lib. -->
<script type="text/javascript" src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>

<script>
  new FroalaEditor('div#froala-editor', {
    documentReady: true
  })
</script>

Make sure to set the documentReady field to true.

Done!

# 3. Do You Know that Froala Enables Markdown Support and Makes WYSIWYG HTML Editing Awesome?

If you want markdown support, just enable the markdown plugin in the Froala editor. You will immediately see the changes. Markdown support gives developers flexible, rich text and markdown content creation options. It also offers robust, reliable markdown output for your projects.

How can I enable Markdown mode in Froala?

To enable markdown mode in Froala, first go to your HTML file and create a container for the Froala editor, then add this code:

<div id="froala-editor">
  <h3>Markdown support makes WYSIWYG HTML editing awesome.</h3>
  <p>Markdown plugin in Froala editor provides flexible rich text and markdown content creation options for authors, and also provides robust, reliable markdown output for developer projects.
</div>

Second, Go to your JavaScript file and add these lines:

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'align', 'markdown', 'undo', 'redo']
  })
</script>

Done!

# 4. Do You Know How to Edit Effortlessly with the Inline Selection Toolbar?

You turn the line Selection Toolbar on by Enabling the toolbarVisibleWithoutSelection option. The best alternative to the TinyMCE inline editor now appears as soon as you click in an editable area. You don’t even need to select specific text.  It looks like this:

How can I Enable Inline Toolbar Selection in Froala?

To enable inline toolbar selection, begin as usual. First, go to your HTML file and add a container for the Froala editor:

<div id=“froala-editor”> <h3>Click here to edit the content</h3> <p>Enabling the <strong>toolbarVisibleWithoutSelection</strong> option makes the inline WYSIWYG HTML editor to appear as soon as you click in the editable area and not only when you select text.</p> </div>

Now, go to your JavaScript file and add these lines:

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarInline: true,
    charCounterCount: false
  })
</script>

Done!

# 5. Have You Known that You can Use Multiple Editors on a Page?

Froala is a fantastic editor that allows you to use multiple editors on the same page. It will not affect your editing experience. You can even drag and drop an image from one editor to another.

How can I Use Two Editor Instances on the Same Page with Froala?

Go to your HTML file and create two different containers.

<div id="froala-editor1">
  <p>This is the first editor instance</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>
<br/>
<div id="froala-editor2">
  <p>This is the second editor instance</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>

Go to your JavaScript file and add these lines:

<script>
  new FroalaEditor('div#froala-editor1, div#froala-editor2', {
    toolbarInline: true,
    charCounterCount: false
  })
</script>

Done! you will see two editor instances on the same page.

# 6. Can I Insert Math Equations and Chemistry Formulas Effortlessly?

Do you want to use math equations and chemistry formulas in your editor? Froala enables you to insert them easily. It also supports a wide range of symbols and mathematical expressions.

To add a mathematical equation all you need to do is click on the square root icon. This opens a list of all the symbols required. Similarly, just click the C icon to add open a list of all chemistry formulas. 

How can I Use MathType with Froala?

To use MathType with Froala, you first need to install the MathType for Froala npm module. Use this command in the terminal to get started:

npm install @wiris/mathtype-froala3

Now, you need to load the module into your project using this line:

<script src = "node_modules/@wiris/mathtype-froala3/wiris.js"></script>

Finally, you have to update your Froala configuration options.

// From FroaLa 'Get started' section https://froala.com/wysiwyg-editor/docs/overview/ 
new FroalaEditor('.selector', { 
// Add MathType and ChemType buttons to the toolbar and the image menu: 
toolbar: ['wirisEditor', 'wirisChemistry'],
imageEditButtons: ['wirisEditor','wirisChemistry'], 
// Allow aLL tags, in order to allow MathML: 
htmlAllowedTags: [' .* '],
htmlAllowedAttrs: [' .* '], 
 // ALLow empty tags on these next elements for proper formula rendering: 
htmlAllowedEmptyTags: ['mprescripts', 'none'],
// In case you are using a different FroaLa editor Language than defauLt,
// Language: 'es',
// You can choose the Language for the MathType editor, too:
// @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parametersPregionaL_properties
// mathTypeParameters: { 
// editorParameters: { Language: 'es' },
//},
}

Done!

# 7. Does Froala Support Other Languages Like Arabic or Farsi with RTL?

Unlike English, languages like Arabic, Hebrew, and Farsi are read from right to left (RTL) [4].  Of course, if your web application supports any of these languages, you need a WYSIWYG editor that supports RTL functionality. Don’t worry! Your Froala editor offers full RTL support. When you select languages like Arabic or Farsi in Froala, the toolbar shifts and adjusts itself automatically. It will undoubtedly enhance your RTL text editing experience. Look at the form below showing the  Froala language interface:

How do I Enable RTL Typing in Froala?

You can enable RTL text editing in Froala in one simple step. Go to your HTML file. Create a container for Froala.

<div id="froala-editor">
  <p>The rich text editor has full RTL support. Set the <a href="../docs/options#direction" title="direction option" target="_blank">direction</a> option to rtl and writing in Arabic or Farsi will feel naturally.</p>
</div>

Then go to your JavaScript file and add this code:

<script>
  new FroalaEditor('div#froala-editor', {
    direction: 'rtl'
  })
</script>

As you can see, the direction is set to ‘rtl.’ You enabled RTL typing.

# 8. Do You Know to Use Froala Responsive Video Options to Automatically Adapt to Different Screen Sizes?

This feature enables you to insert videos from different sources like Youtube or Vimeo and then change them based on your device screen. It shows like this:

How do I Enable Responsive Video in Froala?

To enable responsive video, go to your HTML file. Create a container for Froala.

<div id="froala-editor">
  <h3>Embed videos from your favorite service and have them adapt based on the screen size.</h3>
  <p>The responsive video features enables you to insert videos from Youtube or Vimeo and have them change based on your device screen.</p>
</div>

Go to your JavaScript file and add this code:

<script>
  new FroalaEditor('div#froala-editor', {
    videoResponsive: true,
    toolbarButtons: ['insertVideo']
  })
</script>

Done!

# 9. Do You Know How to Use Font Family to Add Your Fonts to the Froala WYSIWYG HTML Editor?

 By using the font_family.min.js plugin, it is possible to add your fonts to the WYSIWYG HTML editor.

First, Include the font on your webpage. In this example, we use four Google fonts: Roboto, Oswald, Montserrat, and Open Sans Condensed.

Next, define the fonts you want to add in the Font Family dropdown using the fontFamily option.

How do I Enable Font Family in Froala?

To enable FontFamily, go to your HTML file. Create a container for Froala.

<div id="froala-editor">
  <p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual font family for the selected text you can use the <a href='../docs/options#fontFamilySelection' title='fontFamilySelection' target='_blank'>fontFamilySelection</a> option.</p>
</div>

Then go to your CSS file and add the lines:

<!-- Include the fonts. -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>

Go to your JavaScript file and add this code:

<!-- Include the plugin file. -->
<script src="../js/plugins/font_family.min.js"></script>

<script>
  new FroalaEditor('div#froala-editor', {
    fontFamily: {
      "Roboto,sans-serif": 'Roboto',
      "Oswald,sans-serif": 'Oswald',
      "Montserrat,sans-serif": 'Montserrat',
      "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
    },
    fontFamilySelection: true
  })
</script>

Done!

# 10. Can I Use Third-Party Integrations for Spelling and Grammar Checking in Froala?

Froala editor supports third-party integration. WProofreader [3], enables advanced spelling, grammar, and text style checking. It allows the user to see and correct typos and grammar problems while typing. It detected misspellings and automatically underlines grammar errors. All you need to do is hover over a marked word and select a suggestion for a replacement. Here is an example:

Follow these steps to integrate and activate the WProofreader spelling and grammar checking functionality on your website:

1. First, go to the WebSpellChecker website and subscribe to the WProofreader Cloud service.
2. When you subscribe, you get an activation key that you need to specify in the WProofreader configuration.
3. Finally, pass your activation key as a value for the serviceId option in the configuration script. It should be an identifier like this” gXuG4NUNri45q9A52Pf

How do I Integrate and Activate WProofreader Spelling and Grammar Checking Functionality in Froala?

To get your spell checker and Wproffreader working, there are several steps you need to follow:

Go to your HTML file. Create a container for Froala.

<div id="froala-editor">
  <p>This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.</p>
</div>

Go to your JavaScript file and add this code:

// From FroaLa 'Get started' section https://froala.com/wysiwyg-editor/docs/overview/ 
new FroalaEditor('.selector', { 
// Add MathType and ChemType buttons to the toolbar and the image menu: 
toolbar: ['wirisEditor', 'wirisChemistry'],
imageEditButtons: ['wirisEditor','wirisChemistry'], 
// Allow aLL tags, in order to allow MathML: 
htmlAllowedTags: [' .* '],
htmlAllowedAttrs: [' .* '], 
 // ALLow empty tags on these next elements for proper formula rendering: 
htmlAllowedEmptyTags: ['mprescripts', 'none'],
// In case you are using a different FroaLa editor Language than defauLt,
// Language: 'es',
// You can choose the Language for the MathType editor, too:
// @see: https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/parametersPregionaL_properties
// mathTypeParameters: { 
// editorParameters: { Language: 'es' },
//},
}

Done!

Are You Ready to Enjoy Froala as a TinyMCE Alternative for Seamless HTML Editor Experience?

TinyMCE HTML editor that offers a wide range of features to users. It enables the easy creation and editing of HTML code, as well as the ability to customize the editor’s look and feel. Froala provides a similar HTML editor at a much lower cost. It has a simple and user-friendly interface, as well as features such as drag-and-drop content blocks, rich text editing, and custom integration with other tools. Both editors offer an excellent user experience and can assist you in creating high-quality HTML code.Don’t waste time! Head over to Froala and sign up to start enjoying the seamless, powerful features of the Froala WYSIWYG editor.

TinyMCE Alternative FAQs

Does WordPress still use TinyMCE?

Yes, WordPress still uses TinyMCE’s lighter version. To get the best editing experience in WordPress, you can choose a TinyMCE alternative WordPress editor.

Is TinyMCE free for commercial use?

Yes, TinyMCE is open-source and free for commercial use. However, it’s very limited as an open-source editor, and its paid plans are pricier compared to other premium editors such as Froala.

[1] https://www.tiny.cloud/

[2] https://www.g2.com/categories/wysiwyg-editors/free

[3] https://webspellchecker.com/

[4] https://froala.com/wysiwyg-editor/examples/rtl-ltr-custom-button/