PHPackages froala/wysiwyg-cake2 - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. froala/wysiwyg-cake2 ActiveCakephp-plugin[Utility & Helpers](/categories/utility) froala/wysiwyg-cake2 ==================== A beautiful WYSIWYG text editor based on HTML5 technology. Cross browser, with mobile support, high performance and Retina Ready modern design. 5.2.0(1mo ago)1180proprietaryCSSCI passing Since Oct 1Pushed 3w ago2 watchersCompare [ Source](https://github.com/froala/wysiwyg-cake2)[ Packagist](https://packagist.org/packages/froala/wysiwyg-cake2)[ Docs](https://www.froala.com/wysiwyg-editor)[ RSS](/packages/froala-wysiwyg-cake2/feed)WikiDiscussions master Synced 4w ago READMEChangelog (10)Dependencies (2)Versions (104)Used By (0) Froala WYSIWYG Editor Plugin for CakePHP ======================================== [](#froala-wysiwyg-editor-plugin-for-cakephp) [![Build Status](https://camo.githubusercontent.com/6d0b3b2ccfe2e4c7a601e93edfc2be26715cafd35f552c895a0f74f2629880dd/68747470733a2f2f7472617669732d63692e6f72672f66726f616c612f777973697779672d63616b65322e737667)](https://travis-ci.org/froala/wysiwy-cake2)[![Packagist](https://camo.githubusercontent.com/d029044a366e3350025e427bd1255e4dc732497c758a01acac108af937d84fbe/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f66726f616c612f777973697779672d63616b65322e737667)](https://packagist.org/packages/froala/wysiwyg-cake2)[![Packagist](https://camo.githubusercontent.com/0aeba0b36a1418f7479eff154b88d62d4a07a01db6cf7f2ba42c889c83a32aec/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f66726f616c612f777973697779672d63616b65322e737667)](https://packagist.org/packages/froala/wysiwyg-cake2) > CakePHP Plugin for Froala Javascript WYSIWYG Text Editor. For cake 2.3+ About ----- [](#about) The purpose of placing [Froala WYSIWYG Editor](http://editor.froala.com) in a plugin is to keep it separate from a themed view, the regular webroot or the app in general, which makes it easier to update and overall follows the idea of keeping the code clean and modular. Installation ------------ [](#installation) To use Froala WYSIWYG Editor you need to clone git repository: ``` git clone git://github.com/froala/wysiwyg-cake2.git Plugin/Froala ``` Or if your CakePHP application is setup as a git repository, you can add it as a submodule: ``` git submodule add git://github.com/froala/wysiwyg-cake2.git Plugin/Froala ``` Alternatively, you can download an archive from the [master branch on Github](https://github.com/froala/wysiwyg-cake/archive/master.zip) and extract the contents to `Plugin/Froala`. Add: ``` "froala/wysiwyg-cake2": "^2.9" ``` to the require section of your composer.json file. or use [composer](https://getcomposer.org/download/) : ``` php ./composer.phar require froala/wysiwyg-cake2 ``` Then move the FroalaEditor folder from /Plugins to app/Plugin and rename it to Froala,or directly clone the folder from git repository to app/Plugin. Usage ----- [](#usage) The Froala helper is basically just a convenience helper that allows you to use php and CakePHP conventions to generate the configuration for Froala and as an extra it allows you to load configs. There two ways you can use this plugin, simply use the helper or load the editor "by hand" using ``` $this->Html->css('/Froala/css/froala_editor.min.css'); $this->Html->script('/Froala/js/froala_editor.min.js', array('toolbarInline' => false)); ``` and placing your own script in the head of the page. Please note that the helper will auto add the Froala editor script to the header of the page. No need to to that by hand if you use the helper. If your app is not set up to work in the top level of your host / but instead in /yourapp/ the automatic inclusion of the script wont work. You'll manually have to add the js file to your app: ``` $this->Html->css('/yourapp/Froala/css/froala_editor.min.css'); $this->Html->script('/yourapp/Froala/js/froala_editor.min.js', array('toolbarInline' => false)); ``` If you need to load the plugins, then use: ``` $this->Html->script( array( '/Froala/js/froala_editor.min.js', '/Froala/js/plugins/align.min.js', '/Froala/js/plugins/char_counter.min.js', '/Froala/js/plugins/code_beautifier.min.js', '/Froala/js/plugins/code_view.min.js', '/Froala/js/plugins/colors.min.js', '/Froala/js/plugins/draggable.min.js', '/Froala/js/plugins/emoticons.min.js', '/Froala/js/plugins/entities.min.js', '/Froala/js/plugins/file.min.js', '/Froala/js/plugins/font_family.min.js', '/Froala/js/plugins/font_size.min.js', '/Froala/js/plugins/fullscreen.min.js', '/Froala/js/plugins/help.min.js', '/Froala/js/plugins/image.min.js', '/Froala/js/plugins/image_manager.min.js', '/Froala/js/plugins/inline_style.min.js', '/Froala/js/plugins/line_breaker.min.js', '/Froala/js/plugins/link.min.js', '/Froala/js/plugins/lists.min.js', '/Froala/js/plugins/paragraph_format.min.js', '/Froala/js/plugins/paragraph_style.min.js', '/Froala/js/plugins/print.min.js', '/Froala/js/plugins/quick_insert.min.js', '/Froala/js/plugins/quote.min.js', '/Froala/js/plugins/save.min.js', '/Froala/js/plugins/special_characters.min.js', '/Froala/js/plugins/table.min.js', '/Froala/js/plugins/url.min.js', '/Froala/js/plugins/video.min.js'), array('toolbarInline' => false) ); $this->Html->css( array( '/Froala/css/froala_editor.min.css', '/Froala/css/froala_style.min.css', '/Froala/css/plugins/char_counter.min.css', '/Froala/css/plugins/code_view.min.css', '/Froala/css/plugins/colors.min.css', '/Froala/css/plugins/draggable.min.css', '/Froala/css/plugins/emoticons.min.css', '/Froala/css/plugins/file.min.css', '/Froala/css/plugins/fullscreen.min.css', '/Froala/css/plugins/help.min.css', '/Froala/css/plugins/image_manager.min.css', '/Froala/css/plugins/image.min.css', '/Froala/css/plugins/line_breaker.min.css', '/Froala/css/plugins/quick_insert.min.css', '/Froala/css/plugins/special_characters.min.css', '/Froala/css/plugins/table.min.css', '/Froala/css/plugins/video.min.css' ) ); ``` How to use the helper --------------------- [](#how-to-use-the-helper) Since CakePHP 2.0 it is necessary to activate the plugin in your application. To do so, 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. Wherever you want to use it, load it in the controller ``` class AppController extends Controller { ... public $helpers = array('Froala.Froala'); ... } ``` In the view simply use the editor() method and pass options as key/value pairs in an array. ```