Our Blog

More on the HTML editor HTMLArea

I got a comment in my previous post asking about the HTMLArea editor CSS plugin. I am no expert here, but this is how I use it.

First of all, if you have your elements styled (h2,h3,p,a, li, etc.) you may not need the css plugin. By simply adding the style in the textarea (it has to be html escaped), the styles are applied anytime the user adds a paragraph, link, etc. The same can also be achieved by adding editor.config.pageStyle = "@import url(your css file);"; to the javascript init function but it only works in IE. I edited the regular dropdown menu so it shows the elements defined in my style sheet that can actually be used.

p>The content of this newsletter has been edited that way. I have not provided styles but I’ve overwritten the "formatblock" menu like this

 editor.config.formatblock = {
    "Paragraph": "p",
    "Big Title": "h3",
    "Heading": "h4",
    "Smaller heading": "h5"
    };

where editor has been declared as var editor = new HTMLArea("mytextarea"); in the initDocument() function that I have in a separate .js file. This function gets called at body onload="initDocument()".

Now, if you want to be able to apply style classes, then you need the css plugin. The only drawback is that it will add a tag in order to apply the style. I have not found a way to make it apply to the element the cursor is in, such as a paragraph or something else (ie:

instead).

Besides that, anything is better than font tags. By the way, you should remove them from the default toolbar if you want to avoid them.

To add the css plugin:

  1. Add HTMLArea.loadPlugin("CSS"); before the initDocument() function
  2. Register the plugin and define the menu items inside the initDocument() function: 
    editor.registerPlugin(CSS, { 
        combos : [
        { label: "Styles",
          options: { "None": "", //apply no style 
                     "Quote": "quote",
                     "Highlight": "highlight"
                    }
         }
        ]
 });

That will create something like this:

If you want to style sections that are only inside certain elements, add "context: the element you want"

editor.registerPlugin(CSS, { 
    combos : [
        { label: "Styles",
          options: { "None": "", //apply no style 
                     "Quote": "quote",
                     "Highlight": "highlight"
                    },
          context: "p"
         }
        ]
 });

That's it!

Laura

Laura