CakePHP Froala Editor

About

Place Froala Editor in a plugin to keep it separate from a themed view, the regular webroot, or the app in general, this makes easier to perform updates and follows the idea of keeping the code clean and modular.

Installation

To install the Froala Editor you you have the following options:

• Clone the git repository:

  Copy

  git clone git://github.com/froala/wysiwyg-cake.git Plugin/Froala
    

• If your CakePHP application is setup as a git repository, you can add it as a submodule:

  Copy

  git submodule add git://github.com/froala/wysiwyg-cake.git Plugin/Froala
    

• Or open terminal/command prompt (windows) and run: composer require froala/wysiwyg-cake

• Alternatively, you can download an archive from the master branch on Github and extract the contents to Froala plugin.

Make sure that you load the plugin routes by adding to your bootstrap file(bootstrap.php) in config folder:

Plugin::loadAll(); or Plugin::load('Froala'); This will load all plugins at once or only the Froala plugin.

Usage

The Froala helper allows you to use php and CakePHP conventions to generate the configuration for Froala and also allows you to load configs.

Copy

// 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));?>
  

How to use the helper

Since CakePHP 3.0 it is necessary to activate the plugin in your application.

To activate it edit app/Config/bootstrap.php and add the line CakePlugin::load('Froala'); at the bottom. If you already have CakePlugin::loadAll(); to auto-load all plugins then you may skip this step.

To use it load it in the controller:

1. Open AppController.php (your project/src/controller/AppController) Declare variable public $helpers = array('Froala.Froala');
   Copy

   class AppController extends Controller
     {
         ...
     
         public $helpers = array('Froala.Froala');
     
         ...
     }
     

2. In the view page (template) add php <?= $this->Froala->editor('#froala-editor'');?>

This is a simple init example with no options for the Froala Editor. Include the below statement in your view template to integrate the plugins in your editor

Copy

$this->Froala->plugin();
  $this->Froala->editor('selector');
  

This will instruct Froala to convert the matched element on the page to Froala editor.

Refer to Froala configuration options for a complete list of available options.

Default options

If you want a quick way to configure default values for all the Froala Editors of an application, you could use the 'Froala.editorOptions' configuration.

Here is an example of a line you could have in bootstrap.php:

Copy

Configure::write('Froala.editorOptions', array('height' => '300px'));
  

It will make all editors to have a 300px height and apply line braker tags. You may want to override this value for a single editor. To do so, just pass the option to the editor() method and it will override the default value.

Usage examples

Example of init using array of options

Copy

// '#comment'  Represents the html element selector.
  // 'array()'   Represents the list of options that are passed to the editor.
  
  $this->Froala->editor('#comment', array('minHeight => '200px', 'maxHeight' => '400px'));
  
  

Requirements

• PHP version: PHP 5.2+