Developed with love by KnpLabs Hire us for your project!
0

RedactorBundle

by AStepanov

Redactor WYSIWYG editor to your Symfony2 project

THIS PROJECT IS NO LONGER MAINTAINED

RedactorBundle

Bundle is destined to add Redactor WYSIWYG editor to your Symfony2 project.

This bundle does not include original Redactor JavaScript library, for using it you should get it from official website http://imperavi.com/redactor/download/

Installation for Symfony 2.1

composer.json

"require": {
    ...
    "stp/redactor-bundle": "dev-master"
    ...
},
"repositories": [
    {
        "url": "https://github.com/AStepanov/RedactorBundle.git",
        "type": "vcs"
    }
],

app/AppKernel.php

<?php
public function registerBundles()
{
    $bundles = array(
        // ...
        new Stp\RedactorBundle\StpRedactorBundle(),
    );
}

run the command

php app/console assets:install web

app/config/confug.yml

# Twig Configuration
twig:
    # ...
    form:
        resources:
            - 'StpRedactorBundle:Redactor:fields.html.twig'

To allow uploading files add the following lines to app/config/routing.yml

stp_redactor:
    resource: "@StpRedactorBundle/Controller/"
    type:     annotation
    prefix:   /redactor/

How to configure

RedactorBundle provide opportunity to configure some different options of using (e.g. admin, comments, blog)

Run the command for check all config options

php app/console config:dump-reference stp_redactor

Example:

#app/config/config.yml
stp_redactor:
    admin:
        upload_file:
            dir: "%kernel.root_dir%/../web/uploads/content/files"
            maxSize: 10M
            mimeTypes:
                - image/png
                - image/jpeg
        upload_image:
            dir: "%kernel.root_dir%/../web/uploads/content/images"
            maxSize: 5M
            minWidth: 100
            maxWidth: 900
            minHeight: 300
            maxHeight: 900
        role: [ROLE_ADMIN]
    blog:
        upload_image:
            dir: "%kernel.root_dir%/../web/uploads/blog/images"
        role: [IS_AUTHENTICATED_FULLY]
    comments:
        role: [IS_AUTHENTICATED_ANONYMOUSLY]
        settings:
            lang: en

How to use

Use in Form Type

{# template_with_redactor.html.twig #}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="/path_to_jquery/jquery.js"></script>
    <script type="text/javascript" src="/path_to_original_redactor/js/redactor.js"></script>
    <script type="text/javascript" src="{{ asset('bundles/stpredactor/js/script.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="/path_to_original_redactor/css/redactor.css" type="text/css" media="screen" />
{% endblock %}
<?php
//BlogPostType.php
namespace Stp\BlogBundle\Form;

use Symfony\Component\Form\FormBuilderInterface,
    Symfony\Component\Form\AbstractType;

class BlogPostType extends AbstractType
{
    /**
     * @param \Symfony\Component\Form\FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        parent::buildForm($builder, $options);
        $builder->add('description', 'redactor', array('redactor' => 'blog'));
    }
}

Use in SonataAdminBundle

Create new SonataAdmin layout

{# app/Resources/views/admin_layout.html.twig #}

{% extends 'SonataAdminBundle::standard_layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="/path_to_original_redactor/css/redactor.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{{ asset('bundles/stpredactor/css/sonata.css') }}" type="text/css" media="screen" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="/path_to_original_redactor/js/redactor.js"></script>
    <script type="text/javascript" src="{{ asset('bundles/stpredactor/js/script.js') }}"></script>
{% endblock %}

Set path to you layout

# app/config/config.yml
sonata_admin:
    templates:
        layout: ::admin_layout.html.twig
stp_redactor:

# Prototype
id:

# Allow upload files if present
upload_file:

# Directory upload
dir: ~ # Required, Example: %kernel.root_dir%/../web/uploads/content/images

# Max file size
maxSize: 5M

# Mime types allowed for uploading
mimeTypes: # Required, Example: ['image/png', 'image/jpeg']

# Prototype
id: []

# Allow to store file in date-bases folders (like "2012-10-23/file.ext
folders: true

# Allow upload images if present
upload_image:
dir: ~ # Required, Example: %kernel.root_dir%/../web/uploads/content/images

# Max file size
maxSize: 5M
minWidth: ~ # Example: 800
maxWidth: ~ # Example: 800
minHeight: ~ # Example: 100
maxHeight: ~ # Example: 100

# Allow to store file in date-bases folders (like "2012-10-23/image.png
folders: true

# Redactor settings, see http://imperavi.com/redactor/docs/settings/
settings:
lang: ~ # Example: en
source: ~ # Example: false
autoresize: ~ # Example: false
cleanup: ~ # Example: false
convertLinks: ~ # Example: false
convertDivs: ~ # Example: false
overlay: ~ # Example: false
observeImages: ~ # Example: false
shortcuts: ~ # Example: false
air: ~ # Example: false
mobile: ~ # Example: false
tabindex: ~ # Example: 1
imageGetJson: ~ # Example: /load/imagelist
protocol: ~ # Example: https://
minHeight: 300

# Name of JS callback function, should be in "window" NS
fileUploadErrorCallback: redactorErrorUploadFile

# Name of JS callback function, should be in "window" NS
fileUploadCallback: ~ # Example: redactorUploadFile

# Name of JS callback function, should be in "window" NS
imageUploadErrorCallback: redactorErrorUploadFile

# Name of JS callback function, should be in "window" NS
imageUploadCallback: ~ # Example: redactorUploadFile
buttons: # Example: ['html', '|', 'formatting', '|', 'bold', 'italic', 'deleted']

# Prototype
id: []
formattingTags: # Example: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4']

# Prototype
id: []
airButtons: # Example: ['html', '|', 'formatting', '|', 'bold', 'italic', 'deleted']

# Prototype
id: []

# User roles who have access to this redactor view
role: # Example: [ROLE_ADMIN, IS_AUTHENTICATED_ANONYMOUSLY]

# Prototype
id: []