by

How to use bbCode with Symfony3

bbCode is a popular markup language for bulletin board messages and posts. Symfony doesn’t have support of bbCode from the box, but it can be easily enabled with external bundles. Here I describe how.

BBCode Work Sample

I. Install core Symfony3 components

You can use either Symfony installer or Composer to install Symfony3:

composer create-project symfony/framework-standard-edition my_project_name "3.1.*"

where my_project_name is a name of your project.

During installation Symfony3 will ask you about database credentials, host and port, mail server protocol, credentials, host and port and secret token for your application.

For more details about Symfony installation process, please check http://symfony.com/doc/master/book/installation.html.

II. Install FMBBCodeBundle

FMBBCodeBundle is the best bundle I have found for bbCode processing, which easily integrates with Symfony. It uses Decoda to parse bbCode. This bundle supports custom tags, hooks for text processing and emoticons.

Installation steps are pretty straightforward and almost the same as for any other bundle (check “How to Install 3rd Party Bundles” entry from Symfony documentation).

II.1. Install bundle by adding it to composer

composer require helios-ag/fm-bbcode-bundle

II.2. Enable the bundle

Update app/AppKernel.php file by adding new line with bundle name to array of bundles:

// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
  // ...

  public function registerBundles()
  {
    $bundles = array(
      // ...
      new FM\BbcodeBundle\FMBbcodeBundle(),
    );

    // ...
  }
}

II.3. Dump emoticons

Emoticons or smileys are representation of human emotions. FMBBCodeBundle automatically converts textual representation of smileys like :) to <img> tags that reference to dumped images of smileys, so we get something like 🙂 .

Official documentation of FMBbcodeBundle recommends to use

php bin/console bbcode:dump

command to copy smileys to web folder (considering that your web folder is set to web as by default).

However, there is a huge problem: bbcode:dump command relies on Assetic bundle and if you don’t use it, command fails to execute.

If you don’t want to use assetic, just copy contents from vendor/mjohnson/decoda/emoticons folder to web/bundles/decoda/emoticons folder. This is the only thing that bbcode:dump do and safe to reproduce (please, check vendor/helios-ag/fm-bbcode-bundle/Command/DumpEmoticonsCommand.php is unsure).

II.4. Configure bundle

Open app/config/config.yml file and add following lines:

fm_bbcode:
  filter_sets:
    my_filter:
      locale: en
      xhtml: true
      filters: [ default, url, quote, code, image, video, text ]

  emoticon:
    path: "/bundles/decoda/emoticons/"

If you want to find more about bundle’s configuration, check FMBBCodeBundle’s README.md.

Tip! Common problem with smileys is that FMBBCodeBundle requires spaces around them, so if you write :) everything works fine, but :)k isn’t converted to image.

III. How to use FMBBCodeBundle

Bundle adds Twig filters. In Twig template use it as follows:

{{ '[quote="helios"]Some quote[/quote]' | bbcode_filter('my_filter') }}

where my_filter is the name of your filter, which was configured in config.yml.

IV. Add bbCode editor to your project

The best bbCode editor I have found so far is SCEditor. Download it and unpack to web/bundles/sceditor.

SCEditor / BBCode editor

You can integrate it by adding paths to editor’s stylesheets and scripts as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{ asset("bundles/sceditor/themes/square.min.css") }}" type="text/css" media="all" />
<script src="{{ asset("bundles/sceditor/jquery.sceditor.bbcode.min.js") }}" type="text/javascript"></script>

You might need to replace link to jquery.min.js with your own link. Also, no need to include jQuery twice.

Next call updates desired textareas to SCEditor:

$('.bbcode-editor').sceditor({
  plugins: 'bbcode',
  style: '{{ asset('bundles/sceditor/jquery.sceditor.default.min.css') }}',
});

$.sceditor.BBCodeParser.QuoteType = $.sceditor.BBCodeParser.QuoteType.always;

The last line tells SCEditor to always place quotes for links in [url] and [img] tags. It is necessary because FMBBCodeBundle requires links in tags to be quoted to parse them properly (as of version 7.0).

Write a Comment

Comment