froala.com
Open in
urlscan Pro
2606:4700:20::681a:887
Public Scan
Submitted URL: https://www.froala.com/wysiwyg-editor
Effective URL: https://froala.com/wysiwyg-editor/
Submission: On May 23 via api from US — Scanned from DE
Effective URL: https://froala.com/wysiwyg-editor/
Submission: On May 23 via api from US — Scanned from DE
Form analysis
0 forms found in the DOMText Content
New Froala Editor Just Released LEARN MORE * Contact Sales * Support * Blog * Contact Sales * Support * Blog * 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 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 * 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 Legal | Privacy | Terms | Sitemap | Cookies [class^="wpforms-"] [class^="wpforms-"] [bws_google_captcha] <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_113396270" 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_964222906" 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_879048283" 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>