Ars Informatica
September 28, 2020
Health Care Informatics
Web-based MySQL/PHP Databasing
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us

 Article Feed for this site

Composing and formatting blog text using HTMLArea Composer

March 6, 2006

Article and weblog text for this site are created on-line: text is entered into a form TEXTAREA, and all formatting accomplished via a Word-like button-bar interface. No HTML knowledge is required, though the underlying code is one click away, and custom code is easily dropped in.

This text was created via the free HTMLArea Composer, by Andrew Bragdon. Try the Ars Informatica implementation on-line - change this text, add to it, drop in tables or other elements as you choose. Note, however, that the submit button has been disabled.

Integrating HTMLArea Composer took minutes: the documentation is excellent. The toolbar above was customized in under an hour - this took a little more effort, especially if you accidentally skip some of the necessary steps (I created and initialized the Page Break icon but forgot to update the toolbar). Should've read all of the documentation ...

Changing the default style for the TEXTAREA took a little more work, as some CSS tags work, and others don't, when specified using the config.pageStyle method.

Full code for my HTMLArea implementation:

< script type="text/javascript" defer="1">
    var config = new HTMLArea.Config();
    config.pageStyle = 'body { color:black;font:8pt verdana,sans-serif }';
        id        : "pagebreak",
        tooltip   : "Page Break",
        image     : "htmlarea/images/my_pagebreak.gif",
        textMode  : false,
        action    : function(editor, id) {
            editor.insertHTML('< hr style="color:blue">');
    config.toolbar = [
        [ "fontname", "space", "fontsize", "space", "formatblock", "space",
"bold", "italic", "underline", "separator", "strikethrough", "subscript",
"superscript", "separator", "copy", "cut", "paste", "space", "undo", "redo" ],

        [ "justifyleft", "justifycenter", "justifyright", "justifyfull",
"separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent",
"separator", "forecolor", "hilitecolor", "textindicator", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable", "pagebreak",
"htmlmode", "separator", "popupeditor", "separator", "showhelp", "about" ]

    HTMLArea.replace("text1", config)
< /script>

Almost too easy. Still, familiarity with programming methodology certainly helps. And, as a footnote, while I can't help you through your struggles with this software, help is included in the HTMLArea Composer package.

Really bright viewers may note that there's a space in the script and /script tags - inserted so these tags would show on screen, rather than execute. Remove them when you write your code.

Copyright © 2020 Ars Informatica. All Rights Reserved.