How To Integrate 3rd Party Tools Into My CSS Rich Text Editor?

Visual web editing tools include rich text editors. They make it simple for you to change your website’s content. You may format text, add photos and videos, and enter links using your CSS rich text editor without writing any code. As a result, you can edit the information more quickly than before. Because of this, you ought to consider including the WYSIWYG rich text editor CSS in your online programs. It can significantly simplify your life.

With its cutting-edge features, Froala, widely recognized as one of the best rich text editors on the market, offers a seamless user experience for both novice and expert users. Froala can be used for various tasks and numerous firms utilize it across the globe. Froala supports many languages, including East Asian ones, because of its widespread use. Therefore, it only makes sense that this post will examine how to include third-party tools in the best rich-text editor CSS.

How To Integrate 3rd Party Tools Into WYSIWYG CSS Rich Text Editor?

Several useful 3rd party tools can be integrated into the best rich text editor available today.  

How Can I Achieve Code Mirroring With a CSS Rich Text Editor?

You can use the code view.min.js plugin alone or in conjunction with Code Mirror. Include the necessary Code Mirror CSS and JS files. That’s all that needs to be done.

Code Mirror can be enabled or disabled using the codeMirror and codeMirrorOptions variables. The default value for codeMirror is window.codeMirror.

For example:

<div id="froala-editor"> <p>Click the Code View button to see the editor content's HTML.</p> <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/></div>

<!-- Code Mirror CSS file. --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css"><!-- Include the plugin CSS file. --><link rel="stylesheet" href="../css/plugins/code_view.min.css">

What Is Code Real-Time Editing?

Codox.io and the Froala WYSIWYG HTML Editor are integrated and have an official plugin.

The API key you created for your Froala integration on the dashboard should be the value for apiKey in the query string.

To make real-time co-editing for Froala possible, incorporate the following JavaScript block into your program. Change the apiKey field with the one you get.

The Froala editor instance supplied in the editor attribute will be where the co-editing session begins.

The Froala editor needs to be fully initialized before calling codox.init(). By including an initialized event hook in the constructor of Froala, we ensure it is initialized first in the example code.

Your document management service should supply the docId and username values. Wave wants your service’s docId to be globally unique.

Here’s how to do it:

<!-- Include the following css file. --><link href="https://cdn1.codox.io/lib/css/wave.client.css" rel="stylesheet">

<!-- Include the following js file. --><script src="https://app.codox.io/plugins/wave.client.js?apiKey=your-api-key&app=froala" type="text/javascript"></script>
<script>
const codox = new Codox();
const editor = new FroalaEditor('#editor', {
events: {
//setting up on initialization event
'initialized': function() {
//Adding Wave configuration
var config = {
"app" : "froala",
"docId" : "mydoc",
"username" : "Chris",
"editor" : editor,
"apiKey" : "d5bb1f48-356b-4032-8d0c-ba1a79396f79", //replace this
};
codox.init(config);
}
}
</script>

How Can I Integrate Embed.ly On My RTE?

On the page where you display the edited content, make sure you load Embedly JS code.

For example:
<!-- Include Embedly plugin style. --><link rel="stylesheet" href="../css/third_party/embedly.min.css">

Then you move on to integrating Embed.ly on your files.
HTML:
<div id="froala-editor"><p>With over 500 providers, embed.ly is probably the best service when it comes to embedded content. You can embed rich content such as Twitter, Facebook, Instagram, and lots of other publishing platform embeds.</p></div>

Include the Embed.ly plugin style in your CSS:
<!-- Include Embedly plugin style. --><link rel="stylesheet" href="../css/third_party/embedly.min.css">

Define the style in your JS file:
<!-- Include Embedly plugin JS. --><link rel="stylesheet" href="../js/third_party/embedly.min.js"><script>new FroalaEditor('#froala-editor',{toolbarButtons: [['bold', 'italic', 'underline'], ['embedly','html']]});</script>

How Can I Integrate Font Awesome 5 JS?

With version 2.7.6, Font Awesome 5 is already integrated and ready to use in the Froala WYSIWYG CSS Editor. If you own a Font Awesome Pro license, you may use the iconsTemplate option to enable utilizing the standard icons rather than the solid ones.

Font Awesome 5 may be simply integrated with Froala WYSIWYG RTE. In your HTML file, first define the div id as follows:

<div id="froala-editor"></div>

Next, you simply include the Font Awesome 5 JS:
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<script>
new FroalaEditor('div#froala-editor', {
iconsTemplate: 'font_awesome_5'

// If you want to use the regular/light icons, change the template to the following.
// iconsTemplate: 'font_awesome_5r'
// iconsTemplate: 'font_awesome_5l'
})
</script>

What Can I Do To Integrate The TUI Advanced Image Editor?

The TUI Image editor is used to include advanced image editing features, as the name suggests.

Adding an id to your div in the HTML is the first step in integrating the TUI Advanced Image Editor:

<div id="froala-editor"> <p>Click on the image then use the advanced edit button to launch the TUI Advanced image editor plugin.</p> <img class="fr-dib" src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" alt="Old Clock" width="300"/></div>

Next, simply integrate the TUI class, first in your CSS class:

<!-- Include TUI CSS. --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.css"><link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css"><!-- Include TUI Froala Editor CSS. --><link rel="stylesheet" href="../css/third_party/image_tui.min.css">

And then in your JS script while defining your new class:

<!-- Include TUI JS. --><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script><!-- Include TUI plugin. --><script type="text/javascript" src="../js/third_party/image_tui.min.js"></script><script> new FroalaEditor('div#froala-editor');</script>

What Is WProofreader Spelling And Grammar Checker?

The WProofreader product created by WebSpellChecker is integrated with the Froala WYSIWYG HTML Editor to provide extensive spelling, grammar, and text style checking. Typos and grammar errors can be seen and fixed using WProofreader while you’re typing or in a separate dialog mode. Grammar and spelling mistakes will be highlighted right away. To choose a suggested alternative for a marked word, the user only needs to hover over it.

You can integrate and enable the WProofreader spelling and grammar checking capability on your website with a few steps.

1. Visit the WProofreader Cloud subscription page on the WebSpellChecker website.
2. You will receive an activation key with the subscription, which you must enter in the WProofreader setup.
3. In the configuration script, pass your activation key as a value for the serviceId parameter. It should be something like “gXuG4NUNri45q9A52Pf,” for example.

Add a sentence to your HTML file while giving your text an id in the div:

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

Next, simply define your new class in the JS script:

<!-- Include the wscbundle.js file. --><script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
<!-- Include the WEBSPELLCHECKER_CONFIG variable. →
<script>
window.WEBSPELLCHECKER_CONFIG = { autoSearch: true,
autoDestroy: true, s
erviceId: "service-id-recieved-from-webspellchecker-after-subscription" };
</script>
<script>
new FroalaEditor('#froala-editor', {
iframe: true,
events: { 'initialized': function() { WEBSPELLCHECKER.init({
container: this.$iframe ? this.$iframe[0] : this.el
});
}
}
});
</script>

How Can Math Type Be Integrated With WYSIWYG?

MathType, created by Wiris, is the top formula editor and equation writer used by STEM students and professors at K–12 and tertiary institutions worldwide. MathType offers both a user-friendly interface and expertly crafted arithmetic formulas. The following are some of the main characteristics of the MathType Froala plugin:

• A variety of symbols and mathematical formulas
• Support for right-to-left languages (Arabic)
• Convenience
• Support for Latex
• Support for chemical formulas and symbols (ChemType)

Formulas for arithmetic and chemistry are simple to enter or write by hand in Froala thanks to MathType. MathType makes it easy to type or handwrite mathematical and chemical formulas in Froala. There are a few easy steps to integrate the Math Type on your website.

1. Download the most recent versions of MathType and Froala Editor.
2. Visit the MathType website and adhere to the instructions tailored to your situation.

First, install the MathType for the Froala npm module:

npm install @wiris/mathtype-froala3

Then load the module in your project:

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

Finally, update 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' },
//},
}

Are You Ready To Use 3rd Party Tools With WYSIWYG CSS Rich Text Editor?

Froala is a beautiful WYSIWYG JavaScript editor. It comes with a clean and modern UI design. It can deliver an amazing editing experience. Also, Froala is highly secure. It offers a strong defense against all types of XSS attacks. One of the best parts is that it is very easy to integrate into React JS applications. Therefore, you should consider using Froala in your React web application.

Froala is the best WYSIWYG HTML editor on the market, as it gives your web apps rich text editing capabilities. Try it now for free.