froala.com Open in urlscan Pro
2606:4700:20::681a:987 Public Scan

Back to summary
Submitted URL:
https://u7808876.ct.sendgrid.net/ls/click?upn=-2Fhf6e0OUU-2BjC8S0LpGHtgsR2Sa-2FdvklwDDFhfxUtDpVfzqgb-2BQv4kKv2BXwnsgou7HoUeR5FVlN...
Effective URL:
https://froala.com/wysiwyg-editor/?pb=1
Submission: On April 01 via manual (April 1st 2023, 11:53:32 am UTC) from SG — Scanned from SG
Form analysis
0 forms found in the DOM

Text Content

New Froala Editor Just Released LEARN MORE

 * Contact Sales
 * Support
 * Blog


 * Contact Sales
 * Support
 * Blog

 * Overview
 * Features
 * Docs
 * Examples
 * Blog


×
 * Overview
 * Features
 * Docs
 * Examples

Pricing
Get Started

 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started


×
 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started

 1. Home
 2. WYSIWYG Editor


Skip to content

Compare Froala Editor to TinyMCE LEARN MORE

 * Contact Sales
 * Support
 * Blog


 * Contact Sales
 * Support
 * Blog

Compare Froala Editor to TinyMCE
LEARN MORE

 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started


 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started

 * WYSIWYG Editor
   * Overview
   * Tour
   * Features
   * Pricing
   * Solutions
   * Get Started
   * Examples
 * Free Tools
   * Design Blocks
     * Overview
     * Developers
     * Designers
     * Download
     * Online Demo
   * Online HTML Editor
   * WebTestIt
   * Pages
   * Image Uploader
 * Support
 * Docs
 * Contact


×
 * WYSIWYG Editor
   * Overview
   * Tour
   * Features
   * Pricing
   * Solutions
   * Get Started
   * Examples
 * Free Tools
   * Design Blocks
     * Overview
     * Developers
     * Designers
     * Download
     * Online Demo
   * Online HTML Editor
   * WebTestIt
   * Pages
   * Image Uploader
 * Support
 * Docs
 * Contact


Buy Now
Get Started
 * Overview
 * Features
 * Docs
 * Examples


×
 * Overview
 * Features
 * Docs
 * Examples

Pricing
Get Started

 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started


×
 * Overview
 * Features
 * Docs
 * Examples
 * Pricing
 * Get Started

 1. Home
 2. WYSIWYG Editor



Have you seen Froala’s 25%+ discounts on perpetual plans? Don’t miss out, May
only!
Froala, Inc


THE NEXT GENERATION WYSIWYG HTML EDITOR

Beautiful JavaScript web editor that's easy to integrate for developers
and your users will simply fall in love with its clean design.

Explore
Explore
Download    
Download




THESE COMPANIES ARE CHANGING THE WORLD, AND THEY USE FROALA.

Read more about our customers


USE FROALA EDITOR RIGHT AWAY WITH YOUR EXISTING TECH STACK.


JavaScript
React
Django
Vue
WordPress
cakePHP
Aurelia
Gatsby JS
Meteor JS
Knockout JS
Ember JS
Yii Framework
Other Frameworks
JavaScript
Integration Guide

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
      <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
   </head>
   <body>
      <div id="example"></div>
      <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>  	
      <script>
	var editor = new FroalaEditor('#example');		
      </script>	
   </body>
</html>


React
Integration Guide

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  // Require Editor JS files.
  import 'froala-editor/js/froala_editor.pkgd.min.js';
  
  // Require Editor CSS files.
  import 'froala-editor/css/froala_style.min.css';
  import 'froala-editor/css/froala_editor.pkgd.min.css';
  
  // Require Font Awesome.
  import 'font-awesome/css/font-awesome.css';
  
  import FroalaEditor from 'react-froala-wysiwyg';
  
  // Include special components if required.
  // import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
  // import FroalaEditorA from 'react-froala-wysiwyg/FroalaEditorA';
  // import FroalaEditorButton from 'react-froala-wysiwyg/FroalaEditorButton';
  // import FroalaEditorImg from 'react-froala-wysiwyg/FroalaEditorImg';
  // import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';
  
  // Render Froala Editor component.
  ReactDOM.render('textarea'/>, document.getElementById('editor'));


Django
Integration Guide

  $ pip install django-froala-editor
  ```
  from django.db import models
  from froala_editor.fields import FroalaField
  
  class Page(models.Model):
    content = FroalaField(options={
      'toolbarInline': True,
    })
   


Vue
Integration Guide

<template>
    <div id="app">
      <froala :tag="'textarea'" :config="config" v-model="model"></froala>
    </div>
  </template>
  
  <script>
  import VueFroala from 'vue-froala-wysiwyg';
  
  export default {
    name: 'app',
    data () {
      return {
        config: {
          events: {
            'froalaEditor.initialized': function () {
              console.log('initialized')
            }
          }
        },
        model: 'Edit Your Content Here!'
      }
    }
  }
  </script>


WordPress
Integration Guide

  
  //Install Froala Wysiwyg Editor WordPress plugin 

  ```
  //Constants 
  define('FroalaCustomJSFolderPath', '/'.basename(__DIR__).'/custom/js');
  define('FroalaCustomCSSFolderPath', '/'.basename(__DIR__).'/custom/css');
  ```  
  // simple init. Example ⤵
  ```
  // Public method for easy instantiation for the editor.
  // '#comment'  Represents the html element selector.
  $Froala_Editor = new Froala_Editor();
  $Froala_Editor->activate('#comment');
  ```


cakePHP
Integration Guide

  // CakePHP 3.0+
  git clone git://github.com/froala/wysiwyg-cake.git Plugin/Froala
  // or
  composer require froala/wysiwyg-cake

  ```
  File: app/Config/bootstrap.php
  ```
  // if you're not using CakePlugin::loadAll();
  CakePlugin::load('Froala'); 

  // In AppController.php (your project/src/controller/AppController)

   class AppController extends Controller
  {
      ...
  
      public $helpers = array('Froala.Froala');
  
      ...
  }
  
  // In the view page (template)
// Loads Froala Editor javascript also loads all the plugins and css for the plugins
  <?= $this->Froala->plugin();?>
  
  // Will target one specific html selector on which the editor will be init.
  // Second paramenter can be an object/array of options that the Froala Editor takes.
  
  <?= $this->Froala->editor('#froala', array('option' => value));?>



Aurelia
Integration Guide

  $ npm install aurelia-cli -g
  $ au new my-app
  $ cd my-app
  $ npm install aurelia-froala-editor --save

  File: src/main.js or src/main.ts
  ```
  // Editor files.
  import "froala-editor/js/froala_editor.pkgd.min";
  
  ...
  
  // Use the aurelia-froala-editor plugin.
  aurelia.use.plugin('aurelia-froala-editor');
  ```
  
  File: src/app.html
  ```
  <require from="font-awesome.css"></require>
  <require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
  <require from="froala-editor/css/froala_style.min.css"></require>
  
  <froala-editor></froala-editor>
  ```
  
  File: aurelia_project/aurelia.json
  ```
"loader": {
    .....
    "plugins": [
      {
        "name": "text",
        "extensions": [
          ".html",
          ".css"
        ],
        "stub": false
      }
    ]
  },
  .....
  "vendor_bundle":{
  ...
  {
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
  },
  "jquery",
  {
    "name": "froala-editor",
    "path": "../node_modules/froala-editor",
    "main": "js/froala_editor.min",
    "resources": [
      "./js/**/*.{js}",
      "./css/**/*.{css}"
    ]
  },
  {
    "name": "aurelia-froala-editor",
    "path": "../node_modules/aurelia-froala-editor/dist/amd",
    "main": "index",
    "resources": [
      "froala-editor.js",
      "froala-editor.html"
    ],
    "deps": [
      "jquery",
      "froala-editor",
      "font-awesome"
    ]
  }
  },
  .....
  "paths": {
      "root": "src",
      "resources": "resources",
      "elements": "resources/elements",
      "attributes": "resources/attributes",
      "valueConverters": "resources/value-converters",
      "bindingBehaviors": "resources/binding-behaviors",
      "assets": [
        {
          "src": "./node_modules/font-awesome/fonts/**/*.*",
          "dest": "./fonts"
        }
      ]
    }
  ```   

  $ au generate task copy-assets
  

  File: aurelia_project/tasks/copy-assets.js
  ```
  import gulp from 'gulp';
  import project from '../aurelia.json';
  
  export default function copyAssets(done) {
    let assets = project.paths.assets;
  
    assets.forEach(item => {
      gulp.src(item.src)
          .pipe(gulp.dest(item.dest));
      });
  
    done();
  }
  
  ```
  File: aurelia-project/tasks/build.js
  ```
  import copyAssets from './copy-assets';
  
  let build = gulp.series(
    readProjectConfiguration,
    gulp.parallel(
      ...
      copyAssets // Add this.
    ),
    writeBundles
  );
  
  ```
  $ au run --watch


Gatsby JS
Integration Guide

      // Import Froala React components in the Gatsby application. 
      import React from "react"
      import Loadable from 'react-loadable';
      import FroalaEditorComponent from "react-froala-wysiwyg";
  
      function App(){
          return < FroalaEditorComponent tag="textarea" />; 
      }
      const LoadableEditor=Loadable({
          loader:()=>import('../components/Froala'),
          loading() {
              return Loading...
            }
      })
      export default () => < LoadableEditor />;
  
     ```
     // Run the following commands after configuring the project. 
     $ npm install -g gatsby-cli

     $ npm install

     $ Gatsby build

     $ Gatsby serve 
  



Meteor JS
Integration Guide

  meteor add froala:editor
  // Create a froala-template in your main.html file.   
  // Include the template in body of html. {{> froala}} 
  ```
  File: main.js
  ```
 Template.froala.rendered = function () { new FroalaEditor('.editor'); };


Knockout JS
Integration Guide

  npm install knockout-froala
  
  ```
var viewModel = {
    comments: ko.observable(),
    options: {
      // disable wrapping content with paragraphs
      // instead <br> will be used
      enter: FroalaEditor.ENTER_DIV,
  
      // we like gray!
      theme: 'gray',
      toolbarButtons: [ 'bold', 'italic', 'underline' ]
    }
  }
  
  ko.applyBindings( viewModel );
  
  ```
  <textarea data-bind="value: comments, froala: comments, froalaOptions: options"></textarea>
  


Ember JS
Integration Guide

  ember install ember-froala-editor
  ```
  File: ember-cli-build.js
  ```
  // ember-cli-build.js
  // ... (snip)
  
    'ember-froala-editor': {
      languages: ['es','fr','de'],
      plugins  : true,
      themes   : 'royal'
    },
  
  // ... (snip)
  ``` 

  // this addon comes with a few Ember Components and Helpers to use within your project templates.
  {{froala-editor}}
    {{froala-content}}
  



Yii Framework
Integration Guide

  php composer.phar require --prefer-dist froala/yii2-froala-editor

  ```
 <?php echo froala\froalaeditor\FroalaEditorWidget::widget([
      'name' => 'content',
      'options' => [
          // html attributes
          'id'=>'content'
      ],
      'clientOptions' => [
          'toolbarInline'=> false,
          'theme' =>'royal', //optional: dark, red, gray, royal
          'language'=>'en_gb' // optional: ar, bs, cs, da, de, en_ca, en_gb, en_us ...
      ]
  ]); 
?>
   


Other Frameworks



SIMPLE.

Lots of features don't have to overwhelm the user with hundreds of buttons. The
Froala's WYSIWYG editor smart toolbar can accommodate over 100 features in this
simple interface.

View Demos


SMART. INTUITIVE.

The Froala Smart Toolbar groups all actions by scope into 4 categories. It's an
intuitive toolbar where every feature is easy to find and your most used ones
are there for you.

View Demos


FULL OF FEATURES.

Froala Rich Text Editor has a vast range of both simple and complex features for
all kind of use cases.

View Features

 

Simple

 

Smart

 

Full of Features

 



WHY FROALA EDITOR?


DEVELOPER FRIENDLY

A WYSIWYG HTML editor created by developers, for developers. With a powerful API
and documentation you can get started in minutes.
Quick start


EASY TO EXTEND

You can literally do anything with the Froala Editor. Well written, structured
and documented code is very easy to understand and further extend.
Custom build


OUT OF THE BOX PLUGINS

There's no need to reinvent the wheel. Our rich text editor comes with over 30
out of the box plugins to choose from and use in your project. See plugins


SUPPORTS 15+ INTEGRATIONS NATIVELY ALONG WITH 35+ PLUGINS.



CLASSIC AND INLINE

Our WYSIWYG HTML editor transformed a basic Javascript tool into an essential
technology for many industries. In most cases this wouldn't have been possible
without our Inline WYSIWYG HTML Editor.

Inline Demo
Customizer


GET STARTED NOW

Unlimited users and developers no matter which plan you choose.

For any questions contact us or check out our Help Center.

See Our Plans
Customize Your Editor



WYSIWYG EDITOR

 * Overview
 * Features
 * Pricing
 * Download
 * Examples
 * FAQ
 * Solutions
 * About Us
 * Legal
 * Testimonials


FREE TOOLS

 * Design Blocks
 * Online HTML Editor
 * Pages
 * Image Uploader
 * WebTestIt


RESOURCE

 * React Grid
 * Docs
 * Quick Start
 * Blog
 * Support
 * Contact Us
 * Case Studies
 * Customizer


GET IN TOUCH

support@froala.com

 * 
 * 
 * 
 * 




SIGN UP

Join our email list and receive the latest case studies, event updates, product
news, and much more!

Sign Up

© 2023 Froala, Inc. All Rights Reserved

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_660392740"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1829973592"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1224073325"
class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div
style="width: 302px; height: 422px; position: relative;"> <div style="width:
302px; height: 422px; position: absolute;"> <iframe
src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_"
frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style:
none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px;
left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border:
1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea
id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response" style="width: 250px !important; height: 40px
!important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important;
padding: 0px !important; resize: none !important;"></textarea> </div> </div>
</noscript></div>




 50% OFF on Pro and Enterprise Plans




09
Days
12
Hours
05
Minutes
28
Seconds

×
This website uses cookies
This website uses cookies to improve user experience. By using our website you
consent to all cookies in accordance with our Cookie Policy. Read more

Strictly necessary

Performance

Targeting

Functionality

Unclassified
Save & Close
Accept all
Decline all
Show details Hide details
froala.com Open in urlscan Pro 2606:4700:20::681a:987 Public Scan

Form analysis 0 forms found in the DOM

Text Content

froala.com Open in urlscan Pro
2606:4700:20::681a:987 Public Scan

Form analysis
0 forms found in the DOM
