LcnWYSIHTML5Bundle
WYSIWYG-Editor form widget for Symfony2 based on wysihtml forked from WYSIHTML5. MIT License., (*1)
Installation
Step 1: Install dependencies
Install the required LcnIncludeAssetsBundle., (*2)
Step 2: Download the Bundle
Open a command console, enter your project directory and execute the
following command to download the latest stable version of this bundle:, (*3)
$ composer require locaine/lcn-wysihtml5-bundle "~1.0"
This command requires you to have Composer installed globally, as explained
in the installation chapter
of the Composer documentation., (*4)
Step 3: Enable the Bundle
Then, enable the bundle by adding the following line in the app/AppKernel.php
file of your project:, (*5)
<?php
// app/AppKernel.php
// ...
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ...
new Lcn\WYSIHTML5Bundle\LcnWYSIHTML5Bundle(),
);
// ...
}
// ...
}
Usage
In your Form class, set the field type "lcn_wysihtml5" whenever you want to output the WYSIWYG-Editor., (*6)
$form = $this->createFormBuilder($entity)->add('your_html_field', 'lcn_wysihtml5');
That's it. You're done., (*7)
Configuration
You can customize the default settings by overriding them in your app/config/parameters.yml or app/config/config.yml file., (*8)
Available editor commands
parameters:
# configure the editor commands
lcn_wysihtml5.commands:
- { command: bold }
- { command: italic }
- { command: insertUnorderedList }
- { command: insertOrderedList }
- { command: formatBlock, value: h1 }
- { command: formatBlock, value: h2 }
Use custom Stylsheets and Javascripts for advanced customizations
You can configure the included assets to achieve any configuration provided by the wysihtml editor.
For more details, consult the documentation., (*9)
parameters:
# stylesheets get included directly in the web page with the form widget
lcn_wysihtml5.stylesheets.controls:
- /bundles/lcnwysihtml5/dist/themes/basic/controls.css
# stylesheets get included in the editor's sandboxed iframe
# and should be included when outputting the generated html code.
# you might want to add some base stylsheets from your own theme
lcn_wysihtml5.stylesheets.content:
- /bundles/lcnwysihtml5/dist/themes/basic/content.css
lcn_wysihtml5.parser_rules: /bundles/lcnwysihtml5/dist/themes/basic/parser_rules.js
Customize HTMLPurifier Options for Server Side Sanitization
parameters:
lcn_wysihtml5.purifier_config:
'Attr.AllowedClasses':
- wysiwyg-color-primary
- wysiwyg-color-secondary
- wysiwyg-float-left
- wysiwyg-float-right
- wysiwyg-clear-left
- wysiwyg-clear-right
Customize existing colors
The editor uses class names to apply pre-defined colors:, (*10)
You need to adjust the colors in the css file (set your own theme):, (*11)
parameters:
lcn_wysihtml5.stylesheets.content:
- /bundles/lcnwysihtml5/dist/themes/basic/content.css
This stylesheet gets automatically included in the editor.
However, you have to manually include this stylesheet in your page where you output the html code:, (*12)
<link rel="stylesheet" href="/bundles/lcnwysihtml5/dist/themes/basic/content.css">
Add or remove colors
Configure the available colors in the editor toolbar:, (*13)
parameters:
# configure the editor commands
lcn_wysihtml5.commands:
...
- { command: foreColor, values: [primary, secondary] }
Configure the allowed color class names for Frontend validation in your own custom parser_rules set:, (*14)
parameters:
lcn_wysihtml5.parser_rules: /bundles/lcnwysihtml5/dist/themes/basic/parser_rules.js
Configure the allowed color class names for Server-Side validation using HTMLPurifier:, (*15)
parameters:
lcn_wysihtml5.purifier_config:
'Attr.AllowedClasses':
- wysiwyg-color-primary
- wysiwyg-color-secondary
...
Wallogit.com
