Easily Integrate the Powerful WYSIWYG Froala HTML Editor Into WordPress
Everybody loves to use What-You-See-Is-What-You-Get (WYSIWYG) editors, both for their convenience and ease of use. They make it possible for non-coders to create rich content within minutes. Unfortunately, not all editors are created equally. In fact, many don’t even come close. One common problem is that some editors are difficult to integrate, especially into tools like WordPress. That seriously limits your viable choices.
For this reason, choosing the right editor is important. Simply put, choosing the wrong editor can cause you and your development team no end of problems. That’s why you need a powerful, easy-to-integrate HTML Editor like Froala.
In this article, we’ll go over how to install Froala, easily integrate the Powerful HTML Editor into your WordPress ecosystem, and get started with Froala.
What is Froala?
If you are wondering what makes Froala different, the is the answer is simple. Froala is a blazing fast WYSIWYG HTML editor that is lightweight, well-structured, and highly secure. It’s very easy for your development team to integrate and it has a very clean user interface. Your website users will love it.
Why should you use Froala?
Here are a few highlights that set Froala apart from ‘similar’ editors.
- Easy integration
- Super-fast performance
- Improved user experience with HTML5 and CSS3 support
- Responsive design suitable for all modern devices, including PCs, smartphones, and laptops
- Multilingual support
How can I install Froala?
If you want to install Froala, either download it manually from GitHub and place it in your WordPress plugins folder, or simply get it directly as a download from your WordPress Plugins page. Here, you will find the details of both methods.
How to Install Froala Manually
- Clone or download the contents of the WordPress Froala WYSIWYG
- Create a new folder inside your WordPress installation under the plugins folder.
- Copy Froala to the new folder.
Now, you can see the plugin in your WordPress admin area.
How to Install Froala via the Plugins Page on Your WordPress admin
- Go to your WordPress admin area.
- Head to Plugins. Then click Add New.
- Search for Froala WYSIWYG Editor and follow the automated process.
That’s it! Keep in mind that you might need the “ftp://” credentials, which is a default WordPress behavior when installing new plugins.
How can I integrate Froala into WordPress?
Integrating Froala into your WordPress install is pretty straightforward. Simply follow these steps:
- Go to the Plugins page inside the WordPress admin area.
- Activate the Froala plugin.
That’s it! Now, Froala will act as the default HTML editor on your WordPress.
How can I use Froala on the front-end?
You can use Froala from your WordPress admin area as soon as it is active. If you want to use it on the front-end of your website, however, you will have to initialize it from the themes folder.
Here are the steps of using Froala on the front-end:
Define Custom Folder Path
First, you have to define custom folder path for JavaScript and CSS. Simply use this code:
define('FroalaCustomJSFolderPath', '/'.basename(__DIR__).'/custom/js');
define('FroalaCustomCSSFolderPath', '/'.basename(__DIR__).'/custom/css')
Utilize Public Hooks
Now, you have to utilize WordPress public hooks to implement Froala on the front-end. Follow these steps:
1. Define custom CSS and JavaScript paths.
$custom_css_path = plugins_url(FroalaEditorCustomCSSFolderPath);
$custom_js_path = plugins_url(FroalaEditorCustomJSFolderPath);
2. Now, you have to apply filters on the custom CSS path.
$hook = apply_filters('froala_after_public_init', $custom_css_path.'/test.css', 'css', 'file','test');
3. Create an if statement for your error messages.
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
4. Apply filters on the custom JavaScript path. Then create an if statement that displays the error message.
$hook = apply_filters('froala_before_public_init', $custom_js_path.'/test.js', 'js', 'file','test');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
5. You can use inline scripts for both JavaScript and CSS. Here is the code:
// Example using inline script
$hook = apply_filters('froala_after_public_init', null, 'js', 'inline', 'console.log("test")');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Example using inline css
$hook = apply_filters('froala_before_public_init', null, 'css', 'inline', 'h1 {background-color: #00ffff;}');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
Make sure to register your hooks right after instantiating the FroalaEditor class.
6. Create a new Froala_Editor() instance. Then apply filters and activate the plugin with this code:
Froala_Editor = new Froala_Editor();
.
.
.
$hook = apply_filters('froala_before_public_init', null, 'css', 'inline', 'h1 {background-color: #00ffff;}');
.
.
$froala->activate('#comment',array('colorsBackground '=> ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'],
'colorsText' => ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
));
Overall, the code will look like this:
// There are 2 available hooks that work for the front-end part of the website.
// froala_before_public_init acts before the editor gets initialized and
// froala_after_public_init acts after the editor and all the plugins are loaded.
// Callback function for these hooks accepts 4 params
/** Callback function for public hooks"
*
* @param null $path * File path on server.
* @param null $type * Can be js or css
* @param string $prop * Can be inline|file
* @param null $mix * If prop = file, mix will be the file name else if prop = inline mix will be the data.
*
* @return array|WP_Error
*
*
* To use a public hook, it needs to be registered right after the editor get is instantiated. The proper way
* would be to store it in a variable so you can have access to the debug log.
*
* This example includes a custom CSS file and load's it accordingly because it's used after public init the CSS file
* will be at the very bottom of your head tag.
* To understand better, the params are in this way:
* 1' st froala_after_public_init => name of the hook.
* 2' nd $custom_css_path.'/test.css' => path to the file.
* 3' rd 'css' => script type.
* 4' th 'file' => script property, can be file|inline.
* 5' th 'test' => the name of the file.
*/
$custom_css_path = plugins_url(FroalaEditorCustomCSSFolderPath);
$custom_js_path = plugins_url(FroalaEditorCustomJSFolderPath);
$hook = apply_filters('froala_after_public_init', $custom_css_path.'/test.css', 'css', 'file','test');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Same as the example above but it includes a javascript file and the action of the hook it's before Froala Editor's initialization.
$hook = apply_filters('froala_before_public_init', $custom_js_path.'/test.js', 'js', 'file','test');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Example using inline script
$hook = apply_filters('froala_after_public_init', null, 'js', 'inline', 'console.log("test")');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Example using inline css
$hook = apply_filters('froala_before_public_init', null, 'css', 'inline', 'h1 {background-color: #00ffff;}');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Note!!
//The hooks must be registered right after instantiating the FroalaEditor class.
$Froala_Editor = new Froala_Editor();
.
.
.
$hook = apply_filters('froala_before_public_init', null, 'css', 'inline', 'h1 {background-color: #00ffff;}');
.
.
$froala->activate('#comment',array('colorsBackground '=> ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'],
'colorsText' => ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
));
Utilize Admin Hooks
The process of using Froala on the WordPress admin is quite similar to the method of using it on the front-end. You just need to utilize the admin hooks. Here is the code:
// There are 2 available hooks that work for the admin part of the website.
// froala_before_init acts before the editor gets initialized and
// froala_after_init acts after the editor and all the plugins are loaded.
// Callback function for these hooks accepts 4 params
/** Callback function for public hooks"
*
* @param null $path * File path on server.
* @param null $type * Can be js or css
* @param string $prop * Can be inline|file
* @param null $mix * If prop = file, mix will be the file name else if prop = inline mix will be the data.
*
* @return array|WP_Error
*
*
* To use a private hook, it needs to be registered before the editor get is initialized. The proper way
* would be to store it in a variable so you can have access to the debug log.
*
* This example includes a custom CSS file and load's it accordingly because it's used after admin init the CSS file
* will be at the very bottom of your head tag.
* To understand better, the params are in this way:
* 1' st froala_after_public_init => name of the hook.
* 2' nd $custom_css_path.'/test.css' => path to the file.
* 3' rd 'css' => script type.
* 4' th 'file' => script property, can be file|inline.
* 5' th 'test' => the name of the file.
*/
$custom_css_path = plugins_url(FroalaEditorCustomCSSFolderPath);
$custom_js_path = plugins_url(FroalaEditorCustomJSFolderPath);
$hook = apply_filters('froala_after_init', $custom_css_path.'/test.css', 'css', 'file','test');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Same as the example above but it includes a javascript file and the action of the hook it's before Froala Editor's initialization.
$hook = apply_filters('froala_before_init', $custom_js_path.'/test.js', 'js', 'file','test');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Example using inline script
$hook = apply_filters('froala_after_init', null, 'js', 'inline', 'console.log("test")');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
// Example using inline CSS
$hook = apply_filters('froala_before_init', null, 'css', 'inline', 'h1 {background-color: #00ffff;}');
if( is_wp_error( $hook ) ) {
echo $hook->get_error_message();
}
Use Froala on the Front-End But Save the Images Inside WordPress Media Library
1. Create a new Froala_Editor() instance.
$Froala_Editor = new Froala_Editor();
2. Then activate the plugin using a variety of parameters, including imageUploadParams, imageUploadURL, imageManagerLoadParams, and imageManagerLoadURL.
imageUploadURL, imageManagerLoadParams, and imageManagerLoadURL.
$Froala_Editor->activate('#comment',array(
'imageUploadParams' => ['action' =>'froala_upload_files'],
'imageUploadURL' => admin_url( 'admin-ajax.php' ),
'imageManagerLoadParams' => ['action' =>'froala_image_manager'],
'imageManagerLoadURL'=> admin_url( 'admin-ajax.php' )
));
How can I get started with Froala?
Froala has made the developer’s life a lot easier by providing easy integration support with WordPress. It is also well-designed and blazing fast. These are all great reasons to give it a try.
Froala is a powerful WYSIWYG HTML editor offering 100+ out-of-the-box features. Try it now for free.
No comment yet, add your voice below!