We're going to be deploying html area, these are the instructions:
Price: Free!
Version: 2.03 (changelog)
Requirements: Windows, Internet Explorer 5.5 or greater
(See
htmlArea 3.0 beta forum for Mozilla support)
Download
Click "Download Now" below to download htmlArea.
By downloading htmlArea, you agree to follow these minimal
license
conditions.
Please take a look at some of our other products:
Article Manager - a content management software tool designed to
let non-technical users manage a news-oriented website. Manage
articles and categories, multiple writers and editors. Upload
images, create content with the WYSIWYG editor, syndicate your
content, and more. It can save a busy webmaster hours of tedious
HTML edits every day.
Realty Manager - Manage your real estate listings on your
website with Realty Manager. Features include: separate logins for
each agent to upload their own listings and images, a powerful
search engine, fully customizable templates and database fields, and
more!
See all our products.
|
|
- How do I add htmlArea to my web page?
- It's easy, first you need to upload the htmlArea files to your website.
Just follow these steps:
- Download the latest version from the
htmlArea homepage.
- Unzip the files onto your local computer (making sure to maintain the
directory structure contained in the zip).
- Create a new folder on your website called /htmlarea/ (make sure it's
NOT inside the cgi-bin).
- Transfer all the htmlArea files from your local computer into the /htmlarea/
folder on your website.
- Open the example page /htmlarea/example.html with your browser to make
sure everything works.
Once htmlArea is on your website all you need to do is add some JavaScript
to any pages that you want to add WYSIWYG editors to. Here's how to do that.
- Open the page you want to add a WYSIWYG editor to. Add the following to
the top of the page in the <head></head> of the HTML document.
<script language="Javascript1.2"><!-- // load htmlarea
_editor_url = ""; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return
false; }</scr'+'ipt>'); }
// --></script>
If you've installed htmlArea anywhere other than /htmlarea/ then be
sure to change _editor_url to point to your htmlarea directory (ending
with a forward slash "/").
- For each <textarea> that you want to change, add the following code to
the page.
<script language="JavaScript1.2" defer>
editor_generate('fieldname');
</script>
Be sure to change "fieldname" to be the name (not id) of
the textarea you want to change.
- And you're done, open your page in your browser and see if it worked. If
you run into any problems, keep trying and feel free to visit the
htmlArea forum.
- I want to change the editor settings, how do I do that?
- While it's true that all you need is one line of JavaScript to create an
htmlArea WYSIWYG editor you can also specify more config settings in the code
to control how the editor works and looks. Here's an example of some of the
available settings:
<script language="JavaScript1.2" defer>
var config = new Object(); // create new config object
config.width = "90%";
config.height = "200px";
config.bodyStyle = 'background-color: white; font-family: "Verdana";
font-size: x-small;';
config.debug = 0;
// Add additional editor config settings here...
editor_generate('fieldname',config);
</script>
See below for even more configuration options that can be added. All of
these settings will use default values in editor.js if you don't specify them
yourself.
Width |
specifies the width of the editor (in pixels or as a percentage). |
Height |
specifies the height of the editor (in pixels or as a percentage). |
bodyStyle |
specifies CSS style of the editor window including color, default font
face, and size. Note, the default font information isn't saved, it just
controls how text is displayed if no other font formatting has been
applied. |
debug |
if set to 1, displays a debug field with the actual contents of the
editor (in raw html) which is updated as your type. |
- How can I change what controls are displayed on the toolbar?
- You can add a config.toolbar config setting to control exactly what's
shown on the toolbar. Here's an example.
config.toolbar = [
['fontname'],
['fontsize'],
['fontstyle'],
['linebreak'],
['bold','italic','underline','separator'],
['strikethrough','subscript','superscript','separator'],
['justifyleft','justifycenter','justifyright','separator'],
['OrderedList','UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
//['custom1','custom2','custom3','separator'],
['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],
['about','help']
];
The square brackets control how the buttons are "grouped" together. You can
either erase or comment out (by adding // to the beginning of the line)
buttons or button groups you don't want displayed. Most of the buttons do
pretty much just what you'd expect, but here's a few odd ones for reference.
linebreak |
adds a linebreak to the toolbar, all buttons after this are on the
next line. |
separator |
adds a vertical separator between buttons, helps to visually group
buttons together |
customN |
these are custom buttons that can be defined by JavaScript programmers
who want to extend htmlArea. |
- How can I change what fonts are in the font list?
- There is a config.fontnames setting that lets you control this. See below.
config.fontnames = {
"Arial": "arial, helvetica, sans-serif",
"Courier New": "courier new, courier, mono",
"Georgia": "Georgia, Times New Roman, Times, Serif",
"Tahoma": "Tahoma, Arial, Helvetica, sans-serif",
"Times New Roman": "times new roman, times, serif",
"Verdana": "Verdana, Arial, Helvetica, sans-serif",
"impact": "impact",
"WingDings": "WingDings"
};
The name on the left is what is displayed to the user. The list of fonts on
the right is what is actually put into the font tag in the code.
- How can I change what sizes are in the font size?
- There is a config.fontsizes setting that lets you control this. See below.
config.fontsizes = {
"1 (8 pt)": "1",
"2 (10 pt)": "2",
"3 (12 pt)": "3",
"4 (14 pt)": "4",
"5 (18 pt)": "5",
"6 (24 pt)": "6",
"7 (36 pt)": "7"
};
The value on the right is what the user sees, the value on the left is the
actual font size used.
- How can I change what styles are in the font style (CSS) list?
- As you can probably guess, there's a config.fontstyles setting for this.
Now remember, the styles defined here control how the text looks in the
editor. These styles ALSO have to be defined on any page where you display
content created with the editor. htmlArea will save the class name with the
content but nothing else. It's up to you to define the class style in your
pages.
config.fontstyles = [{
name: "headline",
className: "headline",
classStyle: "font-family: arial; font-size: 28px;"
},{
name: "red text",
className: "saletext2",
classStyle: ""
}];
The "name" is what's displayed to users, "className" is the name of the CSS
class to use, and classStyle defines the attributes of the style in the
editor. If you leave classStyle blank you have to be sure to also specify an
external stylesheet with all the style information (and matching classNames!).
See the next question on how to do that.
- How can I specify an external stylesheet for my styles?
- You can specify a stylesheet to avoid entering the class style data for
each class name. You STILL have to specify which classNames you want to have
available though, see the previous question for information on that.
config.stylesheet = "/style.css";
- What are the project goals for htmlArea?
- When we originally started the htmlArea project we had some pretty
specific goals in mind for how it would work and what issues were important to
us. Those goals still lead the direction of development today and are listed
below in order of priority.
- Compatibility
- htmlArea has to always be backwards compatible with older and
unsupported browsers. This ensures that even if a user with an older and
unsupported browser can't use htmlArea, they'll always be able to, at a
minimum, enter text in a plain textarea like they would have done before.
htmlArea should also be compatible with as many programming languages as
possible by being completely DHTML and JavaScript based.
- Ease of Use
- htmlArea needs to be easy for developers to integrate into their
applications and customize, easy for programmers to extend and modify, and
easy for end users to "use". That's why you only have to add a single line
of JavaScript for each textarea you want to convert, and why all the code is
stored in a single, easy to follow JavaScript file. That's why htmlArea can
be used with almost any programming language (ASP, PHP, Perl, Java, etc),
and that the toolbar is streamlined, customizable by developers, and follows
the conventions of common word processing programs.
- Lightweight
- htmlArea needs to be fast loading, allow the user to perform word
processing functions at a reasonable speed, and not put a lot of strain on a
user's browser. To these ends we've managed to keep the main editor program
in a single file of only 40k and we've written the editor in such a way that
it has a minimal impact on the resources of the browser it is running in. In
addition, where we make use of popup windows to perform additional functions
we try to put as much code as possible in the popup window so it doesn't
increase the size of the base editor.
- This editor is pretty neat, so how does it actually work?
- htmlArea is based on the
MSHTML Editing Platform in Internet Explorer 5.5+ on windows. Basically,
Internet Explorer includes some functionality to make sections of a webpage
editable by defining a "contentEditable" attribute or "designMode" property.
It also provides some built in
commands for performing common web editing operations (bold, italic,
center, insert image, etc).
htmlArea builds on the features provided by Internet Explorer and adds its
own user definable toolbar, an easy method to include a WYSIWYG editor in a
web page (replacing textareas), an easy way to save user changes, as well as a
number of custom web editing commands of its own.
How htmlArea actually works is it replaces a textarea with an (user
definable) toolbar, an iframe that has the "contentEditable" attribute set to
true, and a hidden field with the same name as your original textarea that
gets updated automatically when you modify content in the editor.
The user can enter or modify text as well as use keyboard shortcuts and
toolbar buttons to perform operations on the content. A lot of the editor
commands are built into IE and called via the
execCommand method, but htmlArea also includes other custom commands and
functions written in JavaScript and stored in the editor.js file or the popup
windows (in the /popups/ folder).
- You don't happen to have one of these for (Netscape, Mozilla, Opera,
Mac IE, etc) do you?
- No. None of these other browsers (including IE for Mac) support "contentEditable"
or a way to make existing content in the page editable. It might be possible
to emulate this in JavaScript, but it would be a lot of work. Other problems
include displaying or emulating the flashing | bar cursor you see when
editing. The cross-platform Mozilla browser has some bug entries related to
adding contentEditable functionality, and perhaps in the future it may be
possible to create something for that browser.
Although it's a long shot, you might want to send a friendly letter to
Microsoft to encourage them to make the "contentEditable" functionality work
on IE for the Macintosh. Once they implement it, we can offer it.
- Why doesn't htmlArea output XHTML instead of regular HTML? Can you make
it do that?
- The HTML output by htmlArea is generated by the built in functionality of
Internet Explorer. For that reason, there is no easy way to have it output
XHTML. If we were going to do it, the way to do so would be to parse the HTML
after it's output by IE and convert it to XHTML. That's something we hope to
do at some point.
- I'd like to be able to upload images from my hard drive, can you add
that feature?
- No. We want htmlArea to be compatible with as many programming languages
as possible. Because it's written in client side JavaScript, it should work
with any programming language. If we start adding language specific features
htmlArea won't be as useful to as many people. That said, there's a lot of
free "file upload" scripts available, and htmlArea does include a function
called editor_insertHTML() for inserting text or HTML tags. If you want to
write your own program for doing this it shouldn't be that hard.
Alternatively, you might check in the forum to see if someone already has.
- I'd like to <insert idea here>, can you add that feature?
- Maybe, maybe not. If it's a good feature and it fits in with the goals of
our project we'll likely consider it. The best thing to do is post your
suggestions to the
forum. At the very least we'll try to give you some suggestions and point
you in the right direction. At best you might find somebody else has already
implemented the feature you were hoping for.
- Can I change the toolbar/button colors?
- Yes, just search for "buttonface" and "buttonhighlight" in editor.js and
change those to whatever colors you like. If you haven't heard of those colors
before, it's because they're special windows colors that match whatever color
scheme the user has selected for their desktop. For example, if someone has
changed their desktop color scheme to "lilac", the WYSIWYG editor toolbar and
buttons will match that theme. Try it, it's really neat.
- I love htmlArea, is there anything I can do to help
the project?
- The number one thing you can do to help is also the easiest thing to do;
give us a link on your website. The more people who can find out about
htmlArea the better it will be.
The next best thing you can do is participate in our
forum and post a
message or two to help other htmlArea users (or learn something new yourself).
Lastly, any code improvements you want to share would certainly be welcome
as well.
- Why do the toolbar buttons take so long to load when I have multiple
htmlArea editors on the same page?
- This is a bug/feature of Internet Explorer. htmlArea dynamically updates
the content of your page to replace a textarea with the WYSIWYG editor. In
Internet Explorer, when you update the content of a page after it has loaded
and insert an image it will load the image from the server EVEN if has the
image in it's cache. This means if you have 10 htmlareas on the same page the
"bold" toolbar button will be loaded 10 times.
One workaround for this is to move all your editor_generate() scripts to
the bottom of the page, combine them into one script tag, and remove the
"defer" attribute from that script tag. This will cause them all to run just
as the page is finishing loading and the cached images WILL be used. Meaning,
the browser will only need to load each image once.