jlaso/jsoneditor-bundle

Symfony JlasoJsonBundle

JlasoJsoneditorBundle

Integration json editor in SF2 projects, _(*1)

Instalation

Composer

instantiate Bundle in your kernel init file

// app/AppKernel.php
<?php
    // ...
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Jlaso\Bundle\JlasoJsonEditorBundle\JlasoJsoneditorBundle(),
        );
    }

after, run the command, _(*2)

    php app/console assets:install web/

to copy the resources to the projects web directory., _(*3)

Others

Base configuration

By default, do the following:, _(*4)

Add class "jsoneditor" to textarea field to initialize Htmleditor., _(*5)

    <textarea class="jsoneditor"></textarea>

If you want to use jQuery version of the editor set the following parameters:, _(*6)

    jlaso_jsoneditor:
        include_jquery: true
        htmleditor_jquery: true
        ...

The option include_jquery allow to load external jQuery library from the Google CDN. Set it to true if you haven't included jQuery library somewhere yet, _(*7)

If you are using FormBuilder, use an array to add the class, you can also use the theme option to change the used theme to something other than 'simple' (i.e. on of the other defined themes in your config - the example above defined 'medium'). e.g.:, _(*8)

<?php
    $builder->add('introtext', 'textarea', array(
        'attr' => array(
            'class' => 'jsoneditor',
        )
    ));

Add script to your templates/layout at the bottom of your page (for faster page display)., _(*9)

    {{ jsoneditor_init() }}

# app/config/config.yml
twig:
    form:
        resources:
            - 'JlasoJsoneditorBundle:Form:fields.html.twig'

Localization

You can change language of your tiny_mce by adding language selector into top level of configuration, something like, _(*10)

    // app/config/config.yml
    jlaso_jsoneditor:
        include_jquery: true
        jsoneditor_jquery: true
        textarea_class: "jsoneditor"
        language: %locale%
        theme:
            simple:
                mode: "textareas"
                theme: "advanced"
        ...