openwebware - Free Components and Applications openWYSIWYG 1.01 Documentation
Please read this document completely before using openWYSIWYG.

Please note that this documentation is not all-inclusive, a more detailed instruction manual will be available as openWYSIWYG matures. The good news, this document will walk you through the basics of getting started.

If you have any suggestions on how to improve this document, or feel your contributions will make it more complete, please contact us. We're always looking for ways to improve, whether it's the product itself or the accompanying documentation.

  1. Introduction
    1. What is openWYSIWYG?
    2. Is openWYSIWYG really free and open source?
    3. Do you have a working example I can see?
    4. Where can I learn more about it, download the latest version, or talk to other openWYSIWYG developers?
  2. Browser Requirements
  3. Installation
    1. How do I add openWYSIWYG to my web page or web application?
  4. Frequently Asked Questions
    1. What are the project goals for openWYSIWYG?
    2. openWYSIWYG is great, is there anyway I can help?
    3. I'd like to add a feature, can you add it?
    4. Why don't you support Safari, Opera, or <insert browser name>?
    5. My question isn't answered here?
  5. Known Issues
  6. Change Log
  7. Feature Recommendations for the Next Version
  8. Copyright and Disclaimer

1. Introduction

If you are just getting started with openWYSIWYG, then you've come to the right place. This document explains what openWYSIWYG is, contains information on installing and setting up openWYSIWYG, answers frequently asked questions, lists the program's requirements, and provides other useful information.



1.i. What is openWYSIWYG?

openWYSIWYG is a free cross-browser WYSIWYG (what you see is what you get) editor. With just a few simple lines of JavaScript code you can easily replace a <textarea> with a powerful WYSIWYG editor that lets your users do the following:

  • Format text to be bold, italicized, or underlined.
  • Change the face, size, style and colour.
  • Left, centre, or right-justify paragraphs.
  • Make bulleted or numbered lists.
  • Indent or un-indent paragraphs.
  • Insert hyperlinks, images, and tables.
  • View the HTML source code of what you're editing.
  • And much more...

What sets openWYSIWYG apart from other WYSIWYG editors?

  • It loads extremely fast and is completely written in JavaScript and DHTML. No server side code (like PHP) required.
  • Regardless of what programming language you use, openWYSIWYG will work. (ASP, ASP. Net, PHP, Perl, Java, Python, Cold Fusion, etc).
  • It's open source, meaning you'll have access to the full source code to modify or customize it to your needs.
  • With just one line of code it can easily be added to your content management system or custom web application.
  • It's compatible with the most popular internet browsers, meaning your users will have no trouble making use of it.
  • And best of all, it's free! It can be incorporated into any free or commercial program.


1.ii. Is openWYSIWYG really free and open source?

Yes! Unlike other WYSIWYG editors out there you don't have to fork out big dollars for openWYSIWYG. You can distribute it in your content management system or custom web application. It's absolutely free!

openWYSIWYG is an open source application released under the LGPL, meaning you'll have access to the full source code to modify or customize it to your needs. Add new features, change the styles, or even optimize the code. It's entirely up to you.



1.iii. Do you have a working example I can see?

Absolutely, just check out a working example below:



1.iv. Where can I learn more about it, download the latest version, or talk to other openWYSIWYG developers?

You can learn more about openWYSIWYG and download the latest version at www.openwebware.com. There's also an excellent user community where you can share ideas, learn various tricks, or even post suggestions and comments.



2. Browser Requirements

openWYSIWYG is cross-browser compatible and will work with the most popular internet browsers. This means your users will have no trouble making use of it. Supported browsers include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.



3. Installation

Once you've downloaded openWYSIWYG you'll want to unzip it (while maintaining the directory structure).

openWYSIWYG is coded completely in JavaScript, HTML, and CSS. It also uses images (.gif and .jpg), so if you're uploading these files to your web server you'll want to make sure they're readable.

On Unix based servers, that means every directory has chmod permissions of 755 while the files (.html, .js, .jpg., .gif, etc) are 644. Most Unix based servers use these settings for folders and files by default, so you most likely won't have to change a thing.



3.i. How do I add openWYSIWYG to my web page or web application?

You can easily add openWYSIWYG to your content management system or custom web application by just adding a few simple lines of JavaScript code.

1. Near the beginning of the web page to which you plan to add openWYSIWYG insert the following line of code before the closing </head> tag.

Include the following:
<script language="JavaScript" type="text/javascript" src="/your_directory_path/openwysiwyg/wysiwyg.js"></script>

Where your_directory_path is the path to your openwysiwyg directory.

2. Next, add opening and closing <textarea> tags where you plan to include your WYSIWYG editor. You'll also want to give your <textarea> an ID value.

Example <textarea> code:
<textarea id="your_textarea"></textarea>

Your <textarea>'s ID should be something unique.

3. Finally, add the following JavaScript code just below your closing </textarea> tag.

Example JavaScript code:
<script language="JavaScript">
  generate_wysiwyg('your_textarea');
</script>

The value you pass to the generate_wysiwyg function (your_textarea) must be the exact same as your <textarea>'s ID.

And that's about it, you've just added openWYSIWYG to your content management system or custom web application with just a few small lines of code.



4. Frequently Asked Questions

4.i.What are the project goals for openWYSIWYG?

The project goals for openWYSIWYG are designed to make it easy for developers who contribute to the editor to know where it's going. This also lets people know what's important to us and what we believe makes a good editor.

100% JavaScript

openWYSIWYG must always be coded entirely in JavaScript and DHTML. This is so developers can use it in their applications regardless of the programming language they choose to build their web applications, be it Perl, PHP, ASP, Cold Fusion, or any other language.

That being said, add-ons or plug-ins (e.g. image/media uploading utility) can be coded in a server side language (Perl, PHP, ASP, etc).

Fast Loading and Unbloated

openWYSIWYG must always be fast loading. Regardless of what feature is added, it cannot slow down the loading of the editor itself. There are far too many free WYSIWYG editors out there that take an unbelievable amount of time to load. End users (the very people who will use your web applications) don't like this!

Also, the editor must not become bloated, filled with features that only a small minority of users will make use of. If there's ever a doubt to which features you think should be added please refer to the list of feature recommendations for the next version found in this document.

Easy to Use

openWYSIWYG must be easy to use for developers to integrate into their applications, easy for programmers to add new features, and easy for end users to use.



4.ii.openWYSIWYG is great, is there any way I can help?

Absolutely. Whether you're just starting with openWYSIWYG, are a developer or programmer, or have your own website, almost anyone can help.

If You're a Programmer or Developer

Any code improvements you want to share are most certainly welcome. After all, openWYSIWYG is open source, so we're always open to suggestions and improvements.

If you notice anything that you can do better, or have an improvement you would like to make you can always share it with others in the openWYSIWYG forum, or send us an email with your code improvements, new features, or suggestions.

If you're not sure where to get started you can always check out the feature recommendations slated for the next version.

All contributions will be credited to the creator in the openWYSIWYG source code and on the openwebware.com website.

If You're a Webmaster or Site Owner

As a webmaster, the best 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 openWYSIWYG the better it will be.

Just copy the HTML from one of the code samples below and place it somewhere on your website.

Image Link:
openWYSIWYG - Free Open Source WYSIWYG Editor



Text Link:
openWYSIWYG - Free Open Source WYSIWYG Editor

If You're a New User

Participate in our forum and post a message or two to help other openWYSIWYG users (or learn something new yourself).



4.iii.I'd like to add a feature, can you add it?

Probably not. If it's not listed in the feature recommendations for the next version we just won't have the time to work on it. That doesn't mean you can't work on it or post a message in the forum asking if someone else could help you with it.



4.iv.Why don't you support Safari, Opera, or <insert browser name>?

It's not that we don't want to, we just don't yet. Our first goal was to provide support for the most popular browsers, those being Internet Explorer and Mozilla (Mozilla and Firefox). Safari is definitely something we would like to support since it's gaining in popularity within the Mac community. While not fully tested, if your users are working with Macs they should be able to access openWYSIWYG using a Mozilla based browser (e.g. Mozilla or Firefox).

As for Opera, to be realistic, we currently don't have any plans to support it. Opera just hasn't reached a level of popularity to justify the time required to develop support for it.



4.v.My question isn't answered here?

We're always happy to answer questions. Post your question in the forum if it wasn't answered here.



5. Known Issues

HTML header tags (e.g.: <body>, <head>, etc) aren't preserved

This probably has to do with the browser trying to be smart about the way it generates its HTML. The editor already has HTML header information of its own so inserting a second one confuses the browser and the content gets stripped. While this is a very minor issue, we do hope to research this further and find a solution.



6. Change Log

Version 1.01 (Released: April 9, 2006)
Addresses the following:

  • A bizarre problem on certain version combinations of IE and Windows where; the textarea wasn't hidden, the font size and font type drop downs did not display at all, and the "Text" mode button wasn't hidden when first loading.
  • Font Size and Font Select buttons weren't "unselectable" in IE 6+ (meaning users could drag and drop them into the editor). This is now fixed.
  • The WYSIWYG should now always update the textarea on the user's last command.
  • All document.all references have been changed to document.getElementById.
  • Minor UI changes to the Insert Table popup.
  • Minor design changes to the toolbar (CSS, HTML changes) so it displays better in various HTML doctypes.
  • Undo/Redo now works in Internet Explorer.

Version 1.00 (Released: March 1, 2006)
Initial Release



7. Feature Recommendations for the Next Version

Included below is a list of features and fixes recommended for the next update to openWYSIWYG. We could really use your help, so if you would like to lend a hand let us know, any additions and enhancements will be credited in the source code and on the openwebware.com website.

  • Features and Improvements
    • XHTML compliant code output
    • Table Editing Features (modify table, insert table cell, insert row, merge table cell, etc)
  • Add-ons and Plug-ins
    • Image/Media uploader for PHP


8. Copyright and Disclaimer

This application is open source software released under the LGPL. Please see source code for more details. This package and its contents are Copyright © 2006 openWebWare.com, All Rights Reserved.