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

// 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 acepts 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's instantiated. The propper 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 acordingly, 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']
                                        ));

// 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 acepts 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's initialized. The propper 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 acordingly, 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();
}

// Public method for easy instantiation for the editor.
// '#comment'  Represents the html element selector.

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

// 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']
                                        ));
                                        

// Public method for easy instantiation of the Froala WYSIWYG
// '#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' )
                                    ));

// FroalaEditorCustomJSFolderPath is a constant defined on plugin activation will return
// the path to the Custom JS folder e.g: /froala/custom/js    
// froala_new_plugin, custom hook that integrates the new plugin and registers the new script
// The hook takes 2 params, 1'st the path to the plugin and 2'nd the name of the plugin.
// The if statement check 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 WYSIWYG settings there will be a new plugin in the list
called "test".

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