Choosing the Best WYSIWYG Editor for Styling Tables
If you are using a WYSIWYG editor there are big chances that you want to insert tables. Tables are a great feature to represent data/information in an organized way and it is important to choose a WYSIWYG editor that makes creating/editing tables very easy, this will save your time and let you enjoy the working process.
Get your free copy of our whitepaper to see key differences in how the leading WYSIWYG editors handle these tables.
Fill out the form to get your free copy of our whitepaper
Thousands have chosen Froala.
I just want to complement you all with an excellent piece of code! There are plenty free WYSIWYG editors around, but I just love Froala! It is easy to implement, has enough features, well coded and updated when needed. Good job you all!
— Dave Reedijk
We love all the recent updates. One of our customer JUST ASKED about a video upload option and we look like rockstars 🙂 Amazing work!
Your happy customer,
— Marybeth Alexander, CEO at KnowledgeOwl
Froala WYSIWYG Editor Installation Instructions
Please read the License Agreement before using our rich text editor.
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js'></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.css">
<script src="require.js"></script>
<script>
require.config({
packages: [{
name: 'froala-editor',
main: 'js/froala_editor.min'
}],
paths: {
// Change this to your server if you do not wish to use our CDN.
'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@latest'
}
});
</script>
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
.ss {
background-color: red;
}
</style>
</head>
<body>
<div id="editor">
<div id='edit' style='margin-top:30px;'>
</div>
</div>
<script>
require([
'froala-editor',
'froala-editor/js/plugins/align.min'
], function(FroalaEditor) {
new FroalaEditor('#edit')
});
</script>
</body>
</html>
npm install froala-editor
Install from Bower
Froala WYSIWYG HTML Editor can also be installed by using Bower as showed in the example below:bower install froala-wysiwyg-editor
Load as a CommonJS Module
Froala Editor is using an UMD module pattern, as a result it has support for CommonJS. The following examples presumes you are using npm to install froala-editor, see Install from NPM and install FroalaEditor.var FroalaEditor = require('froala-editor');
// Load a plugin.
require('froala-editor/js/plugins/align.min');
// Initialize editor.
new FroalaEditor('#edit');
Since Froala Editor supports ES6 (ESM – ECMAScript modules) and UMD (AMD, CommonJS), it can be also loaded as a module with the use of transpilers. E.g. Babel, Typescript. The following examples presumes you are using npm to install froala-editor, see Install from NPM.
import FroalaEditor from 'froala-editor'
// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'
// Initialize editor.
new FroalaEditor('#edit')
Froala Rich Text Editor can be used in modern build environments such as Webpack. The code below highlights the Webpack 4 configuration, while a full example is available in this Github Gist.
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules']
},
plugins: []
};
See changelog to keep track of what’s new in the current version.