| 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