English spoken conference

Developing the Hallo Wysiwyg Editor

1.3 version
Maintained Unmaintained

Developing the Hallo Wysiwyg EditorΒΆ

You can use the CreateBundle as a development testbed for the hallo.js editor.

Note

To focus our efforts onto a manageable number of packages, this package is currently not maintained. Security fixes and submitted bug fixes will still be released, but no new features should be expected. This bundle might have outdated documentation, there is no support from the CMF team and you should not expect bugs to be fixed.

If you want to help co-maintaining this package, tell us in a GitHub issue or in #symfony_cmf of the Symfony devs slack.

A compiled and minimized version of hallo.js is bundled with create.js. To develop the actual code, you will need to checkout the full hallo.js repository first. You can do this by running the following command in the symfony console:

1
$ php bin/console cmf:create:init-hallo-devel

The CreateBundle provides a special template that loads the coffeescript files. To use this template, specify hallo-coffee as editor in the includeJSFilesAction:

  • Twig
    1
    2
    3
    4
    {% render(controller(
        "cmf_create.jsloader.controller:includeJSFilesAction",
        {'editor': 'hallo-coffee' }
    )) %}
    
  • PHP
    1
    2
    3
    4
    5
    <?php $view['actions']->render(
        new ControllerReference('cmf_create.jsloader.controller:includeJSFilesAction", array(
            'editor'  => 'hallo-coffee',
        ))
    ) ?>
    

The hallo-coffee template uses Assetic to load the coffee script files from Resources/public/vendor/hallo/src, rather than the pre-compiled JavaScript from Resources/public/vendor/create/deps/hallo-min.js. This also means that you need to add a mapping for coffeescript in your Assetic configuration and you need the coffee compiler set up correctly.

  • YAML
    1
    2
    3
    4
    5
    6
    7
    assetic:
        filters:
            cssrewrite: ~
            coffee:
                bin: "%coffee.bin%"
                node: "%coffee.node%"
                apply_to: "%coffee.extension%"
    
  • XML
    1
    2
    3
    4
    5
    6
    7
    <config xmlns="http://symfony.com/schema/dic/assetic">
        <filter name="cssrewite" />
        <filter name="coffee"
            bin="%coffee.bin%"
            node="%coffee.node%"
            apply-to="%coffee.extension%" />
    </config>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'cssrewrite' => null,
            'coffee'     => array(
                'bin'      => '%coffee.bin%',
                'node'     => '%coffee.node%',
                'apply_to' => '%coffee.extension%',
            ),
        ),
    ));
    

In the cmf-sandbox we did a little hack to not always trigger coffee script compiling. In config.yml we make the coffee extension configurable. Now if the parameters.yml sets coffee.extension to \.coffee the coffeescript is compiled and the coffee compiler needs to be installed. If you set it to anything else like \.nocoffee then you do not need the coffee compiler installed as no file has the extension \.nocoffee.

The default values for the three parameters controlling coffeescript are:

1
2
3
4
5
6
# app/config/parameters.yml

# ...
coffee.bin: /usr/local/bin/coffee
coffee.node: /usr/local/bin/node
coffee.extension: \.coffee

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.