Drupal Tip #3: Post Advanced Formatting

HTML is known to be really easy to learn and understand, and understanding the basic rules of <strong>, <em> and other markup tags is not really hard to remember. However, people can get troubled to only see a blank field where they can write their messages. This is indeed the default behavior that you will find in Drupal, as this CMS manages users' comment very well (filtering of invalid tags, invalid markup fixes, automatic conversion of URL and emails to links,...), but provides however a really basic form to post new comments. It could be therefore very interesting to improve your visitor experience by providing a small tool, that will give them some help about the hidden capacities of your website. You have actually several choices to succeed this need, and we're going to discuss about the best one.

BUEditor Screenshot

The markup language, BBCode or HTML?

First, you have to define the markup language that you will provide to your users. Drupal supports indeed the HTML by default, but you could think that this language is not always suited for your users. The other major alternative is to use the Bulletin Board Code, aka BBCode. This language has been implemented and created by the first forum softwares that wanted to replace the default HTML syntax by a simpler one, and moreover, to protect websites against XSS (cross-scripting hacks) and other problems related to the huge scope of HTML (the integration of Javascript and CSS tags are nice examples to understand the related underlying kind of problems you can encounter Wink. In BBCode, a bold text is formatted like this "[b]bold[b]", when in HTML it looks like this "<strong>bold</strong>".

From our point of view, the reasons which explain the creation of the BBCode are no longer valid, at least with Drupal, simply because this CMS is able to filter really well any user generated content that could potentially be harmful for your website. We also think that adding a new intermediate language is not very suited and understandable for visitors, because you have to remember that, at the end, HTML is what is going to be displayed in the user's browser. Note that however, using HTML for writing comments is only well suited if it is combined with a valuable formatted editor.

Next choice, WYSIWYM or WYSIWYG?

Once the underlying syntax language has been chosen, you also need to decide whether what users want to write is going to be formatted immediately in the post form, or if they will need to use a preview button to ensure that what they meant is correctly displayed. The first choice is called What You See Is What You Mean, when the other is What You See Is What You Get. Many WYSIWYG editors exist in the Drupal world, and here are the best:

Using this kind of editor is really powerful and give a fast preview of what the user is typing. However, beginners tends sometimes to create horrible messages, with tons of HTML tags, because they wanted to combine multiple series of tags (<table>, to not quote them) and they generally tend break everything by not doing things correctly. Our opinion is then to use more classic editor, that just adds formatting buttons that will directly insert and append markup into the comment form. Among the vast list of existing Drupal plugins, the one we have chosen is BUEditor, for several simple reasons: it is easy to use and install, and is still maintained.

BUEditor is really extensible and adds formatting buttons that generate the HTML markup for users. It is then generally really well suited if you allow anonymous and registered users to use filtered HTML in your Drupal website.

It's now time to discover how to install it and configure it properly.

BUEditor Installation and Configuration

  1. Go to the BUEditor project page, and download it.
  2. Upload it to your Drupal installation and enable it in Site Building, Modules.
  3. A new menu, in Site Configuration, BUEditor is now available, it's time to discover it and to enable the BUEditor for all users: user #1 (= admin), authenticated users and anonymous users. In our opinion, it's better to enable it for all, to provide as much services to as much users as possible (including anonymous one).

    Configure BUEditor as the default editor for all users

    Configure BUEditor as the default editor for all users

  4. Optional: You should now setup the BUEditor icon path, to be able, later on, to add new icons without modifying the core files of the BUEditor module. For this, go to the Site Configuration, BUEditor, and click on the Edit button next to the Default BUEditor editor (the one you selected for all users just previously). In the Editor paths frame, set the path to %THEME/images/bueditor, like shown here:

    Configure BUEditor Icon Path

    Configure BUEditor icon path

  5. Optional: Now, copy the content of the modules/bueditor/icons folder to the path you set in the previous step, i.e. themes/yourtheme/images/bueditor

BUEditor is now properly configured for a default usage, see now how to tweak it with your website

Enable images for BUEditor

Filtered HTML input format does not allow users to add images, so the default BUEditor image button will not work (at rendering time). To enable it, go to Site Configuration, Input Formats and click the configure button of the Filtered HTML in the input formats list. Once there, click the additional Configure tab, again (the current tab is normally Edit). Simply add the <img> tab as described in the screenshot below.

Add <img> tag to Filtered HTML format

Configure Filtered HTML format to add image tag

Add a smiley selection dialog box

We previously installed the Smileys module, and it would be very fine to integrate it into BUEditor. The UFKU website provides several snippets (PHP and JS), but only one of them works perfectly with the Smileys module. Follow the guide:

  1. Open Site Configuration, BUEditor, and click on the Edit button of the Default editor.
  2. In one of the empty rows in the Buttons board, create a new button, with the Smileys title, and select the smiley icon (the icon is available in our bueditor-icons-theme.zip theme). Now, simply add the following PHP snippet in the content field:

    php:
    $L = drupal_to_js(_smileys_list());
    $P = base_path();
    drupal_add_js("(function($){
    var click = function() {
      BUE.active.replaceSelection(this.firstChild.alt, 'end');
      return false;
    };
    var map = function(s) {
    return $('<a href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').click(click)[0];
    };
    var links = $.map($L, map);
    BUE.smlyWrap = function() {
      return $('<div style=\"width:200px\"></div>').append($(links).clone(true));
    };
    })(jQuery);", 'inline');
    return 'js: E.quickPop.open(BUE.smlyWrap());';

    You can also configure a shortcut key if you wish.

  3. Save the current configuration, and reorder the button following your preferences.
  4. Done!

Your smiley button is now working, and you should see the following dialog box in your own website:

Smiley Button in the BUEditor

Comment Form BUEditor with a smileys button

Additional buttons

As you can see in our BUEditor configuration, we have also set up the integration of the Quote module, we added a paragraph button, and the syntax highlighting (that will be discussed in a future article). For all of these modifications, do not hesitate to import our BUEditor Default editor configuration file Default.bueditor.txt, and our icons theme bueditor-icons-theme.zip.

Configure BUEditor Buttons

Configure BUEditor Buttons

For more details, here are our changes:

  1. Quote: [quote ]%TEXT%[ /quote]
  2. Code:
    &lt;code language="html">
    %TEXT%
    &lt;/code>
  3. Paragraph:
    <p>
      %TEXT%
    </p>

Configuration Files and Icons

We hope this tutorial helps you to understand and integrate nicely the great BUEditor module to your Drupal website.

Keywords:
Comments are closed.

Comments (10)

Thank a lot for your post!

Thank a lot for your post!

Top

I've been looking for the

I've been looking for the information on post advance formatting. Finally, I got here in your article while searching for free script software. Thanks for sharing this informative posting. It helps me a lot.

Top

AF may be overkill. But you

AF may be overkill. But you do reach a point of diminishing returns with maintaining your custom code to do the same thing an existing module does. Keep in mind that AF exists because I've already gone down this path of improving core forum, first with adapting the old flatforum module and then adding more and more snippets like these until it got to the point where I extracted all my customizations out of my site and put them in a module for everyone to use.
Mark Taylor
testking 642-262 Certified

Top

Hi Mark – I don’t have a

Hi Mark – I don’t have a white paper with details on how SmartAlign works because of IP restrictions. However, suffice it to say that the FW essentially manages the read modify write conditions in the background so the host computer does not have to wait for completion. There’s much more to it that I can’t go into here.

Regarding an reformatting and Advanced Format drive to set alignment… There are two companies who are supplying utilities to help with proper alignment for Advanced Format drives. Acronis and Paragon. I think they both provide solutions for setting up partitions properly or re-aligning partitions after the fact. Great questions!

Tommy Jamess
special Education Lecturer
642-165
Oxford College
USA

Top

This guidance will help a lot

This guidance will help a lot to work effectively in Drupal platform.I think the information provides a more essential coding format of HTML to have enhancement in their source code.

Top

AF may be overkill. But you

AF may be overkill. But you do reach a point of diminishing returns with maintaining your custom code to do the same thing an existing epl module does. Keep in mind that AF exists because I've already gone down this path of improving core forum, first with adapting the old flatforum module and then adding more and more snippets

Top

Thank you very much for this

Thank you very much for this article. I just have installed WP on my site and want to customize it, but it is very hard to me to understand all this php related stuff. So big thanks from a dummie!

Top

This guidance will help a lot

This guidance will help a lot to work effectively in Drupal platform.I think the information provides a more essential coding format of HTML to have enhancement in their source code.

Top

I've already gone down this

I've already gone down this path of improving core forum, first with adapting the old flatforum module and then adding more and more snippets like these until it got to the point where I extracted all my customizations out of my site and put them in a module for everyone to use.

Top
lastnico's picture

What is the name of this

What is the name of this module? Is it published on http://www.drupal.org ?

FSR Admin - Vote for 2012.

Top
  Top Top