Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

wordpress

WordPress Froala WYSIWYG Editor

Compatibility

Version: 3.3.0 up to present versions of WordPress.

Manual Installation

  1. Clone or download the wordpress-froala-wysiwyg repo
  2. Create a new folder inside your WordPress installation under plugins folder.
  3. Copy the contentes that you previously downloaded to the new folder.

The plugin is available under plugins in your WordPress admin area.

Installation

  1. Enter the admin area of the WordPress installation
  2. Go to Plugins
  3. Click Add New.
  4. Search for Froala Wysiwyg Editor and follow the automated proccess.

In most cases you need the "ftp://" credentials. This is a default WordPress behaivour when installing new plugins.

Integration

Go to your Plugins page inside the Admin area of your WordPress installation and activate the plugin. The plugin replaces the default editor.

Usage

You can use the plugin under the Admin area as soon as it is active.

The plugin has a settings page where you can input the licence key. You can also activate/deactivate all the available plugins.

To use the Froala Editor on the front-end part of the website, the plugin must be initialized from the themes folder.

The activate function accepts 2 parameters but the editor can be initialized using just one. The second param can be an array or object of options that can be passed to the editor.

For a complete list of options refer to the Options Documentation.

Constants :

define('FroalaCustomJSFolderPath', '/'.basename(__DIR__).'/custom/js');
  define('FroalaCustomCSSFolderPath', '/'.basename(__DIR__).'/custom/css');
  
  

Public hooks:

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

froala_after_public_init acts after the editor and all the plugins are loaded.

The callback function for these hooks acepts 4 parameters

Callback function for public hooks:

define(
   @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 gets instantiated. The propper way is to store it in a variable so you can have access to the debug log.

The following example includes a custom css file and loads it acordingly, since it is used after public init the css file is at the bottom of your head tag.

  $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();
  }

This is a description of the parameters used:

froala_after_public_initName of the hook.
$custom_css_path.'/test.css'Path to the file.
'css'Script type.
'file'Script property, can be file|inline.
'test'The name of the file.

This example includes a javascript file and the action of the hook is before initializing the Froala Editor.

$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();
  }

This example uses an 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();
  }

This example uses an 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']
                                          ));
  

Admin hooks:

There are 2 available hooks that work for the admin part of the website.

froala_before_init acts before the editor gets initialized.

froala_after_init acts after the editor and all the plugins are loaded.

The callback function for these hooks acepts 4 parameters.

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 gets initialized. The propper way is to store it in a variable so you can have access to the debug log.

The following example includes a custom css file and loads it acordingly, since it is used after admin init the css file it is at the bottom of your head tag.

 
  $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();
  }

This is a description of the parameters used:

froala_after_public_initName of the hook.
$custom_css_path.'/test.css'Path to the file.
'css'Script type.
'file'Script property, can be file|inline.
'test'The name of the file.

This example includes a javascript file, the action of the hook occurs before initializing Froala Editor.

 
  $hook = apply_filters('froala_before_init', $custom_js_path.'/test.js', 'js', 'file','test');
  
  if( is_wp_error( $hook ) ) {
    echo $hook->get_error_message();
  }

This example uses an inline script

  $hook = apply_filters('froala_after_init', null, 'js', 'inline', 'console.log("test")');
  
  if( is_wp_error( $hook ) ) {
    echo $hook->get_error_message();
  }

This example uses 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();
  }  

Example of simple init :

Public method for easy instantiation for the editor.

'#comment' represents the html element selector.

  $Froala_Editor = new Froala_Editor();
  $Froala_Editor->activate('#comment');
  

Example of intializing using 2 params:

Static method for easy instantiation for the editor.

'#comment' represents the html element selector.

'array()' represents the list of options that are passed to the editor.

  $Froala_Editor = new Froala_Editor();
  $Froala_Editor->activate('#comment',array('colorsBackground' => ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'],
                                           'colorsText'       => ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
                                          ));

Example for usage on the front-end but saving the images inside WordPress media library:

Public method for easy instantiation of the Froala Editor

'#comment' represents the html element selector.

'array()' represents the list of options that are passed to the editor.

  $Froala_Editor = new Froala_Editor();
  $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' )
                                      ));
  
  

Example for adding new plugin for Froala Editor

Plugins are visible in the Admin section under the Froala settings and can be activated/deactivated.

FroalaEditorCustomJSFolderPath is a constant defined on plugin activation will return the path to the Custom JS folder, For example: /froala/custom/js.

froala_new_plugin is a custom hook that integrates the new plugin and registers the new script.

The hook takes 2 params, the first one is the path to the plugin and the second one is the name of the plugin.

The if statement checks if there are any erros on registering the new plugin

  $custom_plugin_path = plugins_url(FroalaEditorCustomJSFolderPath);
  $new_plugin = apply_filters('froala_new_plugin', $custom_plugin_path . '/test.js', 'test');
  
  if( is_wp_error( $new_plugin ) ) {
      echo $new_plugin->get_error_message();
  }
  

After calling the hook inside the Admin Pannel under Froala settings there will be a new plugin in the list called "test".

Add the above code to froala.php to add the plugin inside the Admin Panel.After adding a new plugin, it needs to be activated from the Admin Panel. For demonstrations purposes the plugin comes with a dummy file placed inside froala/custom/js/. You can delete this file at any time.

To test the plugin without adding it to Admin Panel,use the following code inside the functions file in your theme:

$custom_plugin_path = plugins_url(FroalaEditorCustomJSFolderPath);
  $new_plugin = apply_filters('froala_before_public_init', $custom_plugin_path . '/test.js','js','file', 'test');
  
  if( is_wp_error( $new_plugin ) ) {
    echo $new_plugin->get_error_message();
  }
  
  

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2092413603" 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_2104212991" 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_1951861035" 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>