DOCUMENTATION | ADDONS | EXAMPLES

Documentation
Copyright (c) 2006 openWebWare.com

Setup the openWYSIWYG editor

Include the javascript files like the following:

<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script> // optional

Note: You might need to change the src path (red), depending on where you put the files.

Now you have to attach the openWYSIWYG editor to all or to defined textareas of your page.

<script language="javascript1.2">
   // attach the editor to all textareas of your page.
   WYSIWYG.attach('all');
  
   // attach the editor to the textarea with the identifier 'textarea1'.
   WYSIWYG.attach('textarea1');
 </script>

Now try it out!

If you don't see any images on the toolbar then you have to change the image path.
Have a look at the customize section.

If you need to display contents of textarea's with HTML output support, but without the editing possibilities, you can use a function called display.
<script language="javascript1.2">
   // display iframes instead of textareas. It apply's to all textareas of your page.
   WYSIWYG.display('all');
  
   // display an iframe instead of the textarea with the identifier 'textarea1'
   WYSIWYG.display('textarea1');
 </script>



Customize the openWYSIWYG

This section describe how you can customize the openWYSIWYG editor.

The Settings object:


You can create a new instance of the settings object. This object will be used to customize your editor.
var mysettings = new WYSIWYG.Settings();

Now attach the editor to all or to defined textareas of your page.
WYSIWYG.attach('all', mysettings);


Properties of the Settings object:


Here is a list of all properties you can change to customize the look and feel of your editor.
mysettings.ImagesDir = "<path>"; The path where your images are located (default: 'images/')
mysettings.PopupsDir = "<path>"; The path where your popup htmls are located (default: 'popups/')
mysettings.CSSFile = "<path>"; The path + file where your stylesheet file is located (default: 'styles/wysiwyg.css')
mysettings.Width = "<width>"; The width of the editor window (valid units are px and %) (default: '500px')
mysettings.Height = "<height>"; The height of the editor window (valid units are px and %) (default: '200px')
mysettings.DefaultStyle = "<stylesheet>"; The default stylesheet of the editor window
(default: 'font-family: Arial; font-size: 12px; background-color: #FFFFFF')
mysettings.DisabledStyle = "<stylesheet>"; The style which appears if the editor is disabled
(default: 'font-family: Arial; font-size: 12px; background-color: #EEEEEE')
mysettings.ReplaceLineBreaks = <true/false>; Replace line breaks (\n) with html line breaks <br> (used for none html content) (default: false)
mysettings.PreviewWidth = <width>; The width of the preview popup (default: 500)
mysettings.PreviewHeight = <height>; The height of the preview popup (default: 400)
mysettings.RemoveFormatConfMessage = "<text>"; Text which appears if the MS word clean up button is pressed (default: 'Clean HTML inserted by MS Word ?')
mysettings.NoValidBrowserMessage = "<text>"; Text which appears if the browser is not supported by openWYSIWYG (default: 'openWYSIWYG does not support your browser.')
mysettings.AnchorPathToStrip = "<url>"; The url which is striped off on anchors (only IE, recommended: auto) (default: 'auto')
mysettings.ImagePathToStrip = "<url>"; The url which is striped off on images (only IE, recommended: auto) (default: 'auto')
mysettings.ContextMenu = <true/false>; Enable / disable the custom context menu (default: true)
mysettings.StatusBarEnabled = <true/false>; Enable / disable the status bar (default: true)
mysettings.InvertIELineBreaks = <true/false>; Enable / disable invert of line break capability in IE (default: false)
mysettings.InsertImagePopup = <path/file>; If you use another implementation like an image library written in PHP, then you can use this setting to customize the location of the implementation file. No need to edit the main javascript file.
(It's used for future upcoming image library addons)
mysettings.InsertImageWith = <width>; Width of the image popup window. (Default: 400)
mysettings.InsertImageWith = <height>; Height of the image popup window. (Default: 210)

Methods of the Settings object:


There are three methods to customize the toolbar elements. (Recommended if you newly to javascript)
mysettings.addToolbarElement("<element>", <toolbar>, <position>); Add the given <element> to the defined <toolbar> on the defined <position>.

Valid elements are:
font, fontsize, bold, italic, underline, forecolor, backcolor, justifyleft, justifycenter, justifyright, unorderedlist, orderedlist, outdent, indent, subscript, superscript, cut, copy, paste, removeformat, undo, redo, inserttable, insertimage, createlink, seperator, undo, redo, seperator, preview, print, viewSource, help

The element seperator adds a line seperator between elements

<toolbar> is an integer starts with 1.
<position> is an integer starts with 1.

Example: mysettings.addToolbarElement("bold", 1, 1);

mysettings.removeToolbarElement("<element>"); Removes the given <element> on the toolbar.

Valid elements are:
font, fontsize, bold, italic, underline, forecolor, backcolor, justifyleft, justifycenter, justifyright, unorderedlist, orderedlist, outdent, indent, subscript, superscript, cut, copy, paste, removeformat, undo, redo, inserttable, insertimage, createlink, seperator, undo, redo, seperator, preview, print, viewSource, help

You can not remove the element seperator only overriding with the function addToolbarElement()

Example: mysettings.removeToolbarElement("bold");

mysettings.clearToolbar(<toolbar>); Clears the given <toolbar>. If the element <toolbar> is not defined then the functions clear all existing toolbars.



<toolbar> is an integer starts with 1.

Example: mysettings.clearToolbar(1);



Array of the Settings object:


There are some arrays within the Settings object you can define directly. So let`s show how does it works.

mysettings.Toolbar[<toolbar index>][<element index>] = "<element>"; The toolbar array is defined in two dimensions, the first dimension is the toolbar index, the second the element index. If you want to define an element in toolbar 2 on position 3 then you have to do this: mysettings.Toolbar[1][2] = "bold";

Valid elements can be found on addToolbarElement().

mysettings.Fonts[<element index>] = "<element>"; You have the posibility to change the font families by setting the Fonts array of the Settings object. If you want to add Arial on the second position then you have to do this: mysettings.Fonts[1] = "Arial";

Valid elements are:
All font family elements (look at a stylesheet description of the tag font-family)

mysettings.Fontsizes[<element index>] = "<size>"; You can also change the font size which you can use on the editor. If you want to add the font size 5 on the first position of drop down box, then you have to do this: mysettings.Fontsizes[0] = "5";

Valid sizes are:
1 - ... (i dont know if the size attribute is limit)




Change Log

v1.4.7 (Released: September 9, 2007)
Addresses the following:

  • added - Possibilty to maximize the editor window
  • fixed - Correct relative image path on preview, now it works for all images
  • added - Table highlighting possibility
  • added - Possiblity to assign headings (crashed)
  • changed - Code improvments to tons of functions
  • changed - WYSIWYG.formatText() function renamed to WYSIWYG.execCommand()
  • changed - WYSIWYG.findParentTag() renamed to WYSIWYG.findParent()
  • added - WYSIWYG_Core.findParentNode(tagName, node) function which finds a parent node by tag name starts on the given node
  • fixed - Implement function WYSIWYG_Core.getAttribute which solve the problem while getting the style attribute on IE
  • changed - Getting style attribute while editing a link
  • added - WYSIWYG_Table object, which is used for improving table editing
  • changed - New icons print and preview (thx sweb)
  • added - Save and return button on toolbar, the return button is disabled by default. (thx sweb)
  • added - Table function improvments
  • added - New WYSIWYG_Color object, which handels the color choosing
  • added - Full justify text (code by tim)

v1.4.6c (Released: December 25, 2006)
Addresses the following:

  • fixed - Solved issue with backcolor command on IE
  • changed - Add parameter value to WYSIWYG_Core.execCommand() function
v1.4.6b (Released: December 23, 2006)
Addresses the following:

  • changed - Debug code on context menu removed
  • fixed - Add "px" to left and top style information on context menu
  • changed - Correct comment of wyswiwyg-settings.js
v1.4.6a (Released: December 21, 2006)
Addresses the following:

  • fixed - bad class name on mouse over of toolbar buttons fixed
  • changed - Rewritten function to get the current position of an element (iframe)
  • fixed - Context menu position issue solved
  • fixed - Wrong variable call fixed
  • fixed - Problem while removing elements with the context menu solved
v1.4.6 (Released: December 17, 2006)
Addresses the following:

  • changed - Modification changed to be the official version of openWYSIWYG
  • fixed - Child nodes will be copied to the parent if a node is removed
  • changed - Complete rewritten context menu
  • changed - Behaviours of the context menu dependents on selection
  • added - Copy/Cut/Paste to context menu
  • changed - Code structure changes
  • added - wysiwyg-popup.js which holds popup specific functions
  • added - new object WYSIWYG_Core added, which holds all core functions
  • added - addEvent() and removeEvent() core function added
  • added - attach() and attachAll() functions which used to attach the editor to textareas
  • changed - Complete rewritten insertLink function, now it works with tags like img, h1 etc
  • added - Override width and height of the editor with size given by the style attributes width and height of the textarea
  • added - New function includeCSS() in Core object, which includes a given stylesheet file on the head tag of the current page
  • fixed - Solved problem if you want to attach the editor to all textareas
  • changed - Include of stylesheet files changed, now using the includeCSS function
  • changed - Complete rewritten display function, now you can use it like like function attach()
Modification v0.4.5 (Released: November 12, 2006)
Addresses the following:

  • added - openImageLibrary addon (for now PHP only)
  • fixed - correct relative anchor and image path on preview
  • changed - various javascript code changes
Modification v0.4.4 (Released: November 11, 2006)
Addresses the following:
  • added - capability of using image library addons
  • fixed - corrupt font + font size selection html
Modification v0.4.3 (Released: October 20, 2006)
Addresses the following:
  • added - Possibility to invert the line break print outs of IE (ENTER = <br>, SHIFT + ENTER = <p>)
  • fixed - Replace of <p> with <br> on carriage return prevented the IE to set ordered and unordered lists.
  • added - Settings object to customize the Editor
  • fixed - Solve javascript error on example.html
  • fixed - Change html layout of the editor to solve the minimum width problem on dynamic editor size.
  • added - Enable/disable possibilty of the context menu
  • added - A general remove function, so it is possible to remove each html element
  • added - Adding an option 'Remove Node' to the context menu
  • added - Adding the possibilty to add the font + font size selection to toolbar2 or placing them where ever you want on the toolbars
  • changed - Removing the vars EnableFontSelection and EnableFontSizeSelection because font + font size selection goes to ToolBar Array like all other buttons.
  • changed - Removing vars EditorMinimumWidth and EditorMinimumHeight after solving the minimum width problem on IE. No more use.
  • added - New Function addToolbarElement() and removeToolbarElement within the settings object
  • added - Possibility to select a html node using the status bar node structure
  • changed - Complete redesign of the toolbar implementation
  • changed - Remove function removeImage() and removeLink(), because function removeNode() do it for all
  • added - Two new functions getEditorOffsetY() and getEditorOffsetX() to get the offsets of the editor window to the body if the the page
  • fixed - broken image path on toolbar button text view
  • added - New function enable(), now you can enable/display the editor on the fly
Modification v0.4.2 (Released: October 16, 2006)
Addresses the following:
  • added - Converting decimal colors to hex colors within style attributes
  • changed - Rename getParentTag() to findParentTag(), the function finds a tag by a given tag name
  • changed - Improving function findParentTag(), now it finds IMG tags and do not return #tags but the parent tag
  • added - Reimplementing function getTag(). The function gets the current selected tag
  • added - New Function getParent(). Returns the parent node of the given element
  • added - New Function getNodeTree(). The function returns a tree of nodes as array, beginning with the current selected element (node) and ending with the HTML node (element).
  • added - New status bar implemented. It's shown the element structure, beginning with the current selected element and ending with the HTML element.
  • added - New Function updateStatusBar(). Updates the status bar with the element structure.
  • changed - Possibility of setting dynamic width and height of the editor
  • fixed - Solving bug while setting style attribute on links

Modification v0.4.1 (Released: October 14, 2006)
Addresses the following:

  • added - Custom context menu for images and links
  • added - Remove option for images and links on the context menu
  • added - New functions removeLink() and removeImages()
  • added - New function $() implemented, its a replacement for document.getElementById()
  • changed - Some small other code changes

Modification v0.4 (Released: October 12, 2006)
Addresses the following:

  • fixed - Dublicated id attribute in color chooser popup
  • fixed - Preventing IE to insert <p> tags on carriage return. IE will insert a normal <br> instead. (Thx to richyrich)
  • fixed - Crappy layout of hyperlink popup on IE (fields: class and name)
  • fixed - With multiple editors on one form, the global var viewTextMode is not unique for each editor. Used an Array instead to set the var for each editor individually
  • fixed - Submitting the editor while in text mode then it will submit escaped html (<br> -> submit -> &lt;br&gt;). Auto switch to HTML Mode if submit
  • fixed - Validate objects on hideFonts() and hideFontSizes() function
  • changed - Improvements on closing font + font size selection. Add a unique event listener for each selection.

Modification v0.3.2a (Released: October 11, 2006)
Addresses the following:

  • added - Improvements on font and font size selection, now the drop downs will be closed if you go through the editor.
  • fixed - Opera bug in insertNodeAtSelection() function solved. That's why the table popup won`t close if you submit it.
  • fixed - CSS file problem in table popup. There was a hard coded path to the CSS file. I changed it so the path to the CSS file will be dynamically inserted.
  • added - Improvements to the color selection menus on table popup, now the button "pick" has a toggle function (open/close the color selections).

Modification v0.3.2a (Released: October 11, 2006)
Addresses the following:

  • fixed - Font and font size selection fixed. I improved the closing a little bit, so if you choose font and then click an font size the font menue will be closed before.
  • added - Added a select field to the hyperlink popup which holds the default targets _blank, _self, _parent, _top. On change the select field updates the 'target' text field.

Modification v0.3.1 (Released: October 10, 2006)
Addresses the following:

  • fixed - Solve the habit of IE to convert relative urls into absolute. Now you can set two vars AnchorPathToStrip and ImagePathToStrip which holds an url that will be stripped off the href and src attributes. If you set the vars to "auto" then the url will automatically get of the current document. I recommend that you use the "auto" methode.

Modification v0.3 (Released: October 9, 2006)
Addresses the following:

  • added - Default style now also applies to the preview window
  • added - Print button + function
  • fixed - A little mistake within the function setAttribute, attr.toLowerCase -> attr.toLowerCase() it prevented the script to apply the styles in IE correctly
  • fixed - Problem while replacing \n with <br> after submitting data in IE solved.
  • fixed - Complete rewritten function insertLink + insertImage. Improving edit capabiltity on both links and images.

Modification v0.2 (Released: October 8, 2006)
Addresses the following:

  • added - New function insertLink(), now you can insert and edit links. New available attributes are target, styleclass, name and style. (IE has some limitations, getting style attribute doesn`t work, hope i can solve this problem)
  • fixed - Stripping MS Word HTML (removed some bugs within the regex)
  • changed - Complete rewritten source code, now all functions + var are within a var WYSIWYG. (ex. WYSIWYG.generate('textarea1', 500, 200); )
  • fixed - Replace <div> with <span> while insert html on none IE Browsers, this solve the new line problem after the <div> tag.
  • added - New function insertImage(), now you can insert and editing images
  • added - Validation of browser versions (thx to TIM)

Modification v0.1 (Released: October 6, 2006)
Addresses the following:

  • added - Possibility to replace \n with <br> to be compatible with previous content coming from a database, for example.
  • added - Button to strip any HTML added by word
  • changed - Modified generate_wysiwyg() method (added width and height to customize size of each editor, width and height are optional parameter)
  • added - Possibility to set the default font family, font size and font color of the editor area
  • added - New function disable_wysiwyg() to disable a editor area
  • changed - Some changes were made to toolbar1 and toolbar2. now toolbar2 is hidden if no elements are assigned.
  • changed - Now you can add the viewSource button to toolbar1
  • added - A new function display_wysiwyg() only for displaying an iframe with content of a textarea (without any editable features)
  • added - A style-class for the iframe to customize the background-color (useful in firefox, because firefox use the background of the parent element)
  • added - Preview button + function (thx to Korvo), now it works in Firefox and use the innerHTML of the iframe instead of the texteare value
  • fixed - Some code improvements for better compatibility with Firefox + IE
  • changed - The var cssDir changed to cssFile, now it includes the complete file path (ex. styles/wysiwyg.css)
  • added - new stylesheet classes, check the css file
  • added - Possibility to enable/disable font + font size selection
  • fixed - Firefox BackColor problem fixed (thx to Merk), no hilite button needed only solve the problem on firefox