Torrent


TOC \o “1-3” \h \z

ERLINK \l “_Toc68458122” Introduction PAGEREF _Toc68458122 \h 4
ERLINK \l “_Toc68458123” Requirements PAGEREF _Toc68458123 \h 4
ERLINK \l “_Toc68458124” Upgrading From An Earlier Version PAGEREF _Toc68458124 \h 5
ERLINK \l “_Toc68458125” Installation PAGEREF _Toc68458125 \h 6
ERLINK \l “_Toc68458126” Embedding in a PHP script PAGEREF _Toc68458126 \h 7
ERLINK \l “_Toc68458127” PHP API PAGEREF _Toc68458127 \h 8
ERLINK \l “_Toc68458128” set_name PAGEREF _Toc68458128 \h 8
ERLINK \l “_Toc68458129” set_instance_lang PAGEREF _Toc68458129 \h 9
ERLINK \l “_Toc68458130” subsequent PAGEREF _Toc68458130 \h 9
ERLINK \l “_Toc68458131” set_code PAGEREF _Toc68458131 \h 9
ERLINK \l “_Toc68458132” usexhtml PAGEREF _Toc68458132 \h 9
ERLINK \l “_Toc68458133” usep PAGEREF _Toc68458133 \h 10
ERLINK \l “_Toc68458134” set_baseurl PAGEREF _Toc68458134 \h 10
ERLINK \l “_Toc68458135” usefullurls PAGEREF _Toc68458135 \h 10
ERLINK \l “_Toc68458136” guidelines_visible PAGEREF _Toc68458136 \h 10
ERLINK \l “_Toc68458137” set_stylesheet PAGEREF _Toc68458137 \h 11
ERLINK \l “_Toc68458138” set_formatmenu PAGEREF _Toc68458138 \h 11
ERLINK \l “_Toc68458139” set_classmenu PAGEREF _Toc68458139 \h 11
ERLINK \l “_Toc68458140” set_fontmenu PAGEREF _Toc68458140 \h 12
ERLINK \l “_Toc68458141” set_sizemenu PAGEREF _Toc68458141 \h 12
ERLINK \l “_Toc68458142” removebuttons PAGEREF _Toc68458142 \h 12
ERLINK \l “_Toc68458143” addbutton PAGEREF _Toc68458143 \h 13
ERLINK \l “_Toc68458144” addspacer PAGEREF _Toc68458144 \h 15
ERLINK \l “_Toc68458145” set_savebutton PAGEREF _Toc68458145 \h 15
ERLINK \l “_Toc68458146” disableimgmngr PAGEREF _Toc68458146 \h 16
ERLINK \l “_Toc68458147” set_inserts PAGEREF _Toc68458147 \h 16
ERLINK \l “_Toc68458148” set_color_swatches PAGEREF _Toc68458148 \h 16
ERLINK \l “_Toc68458149” set_links PAGEREF _Toc68458149 \h 17
ERLINK \l “_Toc68458150” disablebookmarkmngr PAGEREF _Toc68458150 \h 17
ERLINK \l “_Toc68458151” disablelinkmngr PAGEREF _Toc68458151 \h 17
ERLINK \l “_Toc68458152” set_img_dir PAGEREF _Toc68458152 \h 17
ERLINK \l “_Toc68458153” set_doc_dir PAGEREF _Toc68458153 \h 18
ERLINK \l “_Toc68458154” Multiple Instances PAGEREF _Toc68458154 \h 18
ERLINK \l “_Toc68458155” Multiple Languages PAGEREF _Toc68458155 \h 20
ERLINK \l “_Toc68458156” Saving configurations and notes on file caching PAGEREF _Toc68458156 \h 20
ERLINK \l “_Toc68458157” JavaScript API PAGEREF _Toc68458157 \h 21
ERLINK \l “_Toc68458158” Before you start! PAGEREF _Toc68458158 \h 21
ERLINK \l “_Toc68458159” getCode PAGEREF _Toc68458159 \h 22
ERLINK \l “_Toc68458160” getPreviewCode PAGEREF _Toc68458160 \h 22
ERLINK \l “_Toc68458161” getSelectedText PAGEREF _Toc68458161 \h 23
ERLINK \l “_Toc68458162” setCode PAGEREF _Toc68458162 \h 24
ERLINK \l “_Toc68458163” insertAtSelection PAGEREF _Toc68458163 \h 24
ERLINK \l “_Toc68458164” updateHTML PAGEREF _Toc68458164 \h 24
ERLINK \l “_Toc68458165” updateWysiwyg PAGEREF _Toc68458165 \h 24
ERLINK \l “_Toc68458166” showDesign PAGEREF _Toc68458166 \h 24
ERLINK \l “_Toc68458167” showCode PAGEREF _Toc68458167 \h 25
ERLINK \l “_Toc68458168” showPreview PAGEREF _Toc68458168 \h 25
ERLINK \l “_Toc68458169” submit_form PAGEREF _Toc68458169 \h 25
ERLINK \l “_Toc68458170” updateAllHTML PAGEREF _Toc68458170 \h 25
ERLINK \l “_Toc68458171” updateAllWysiwyg PAGEREF _Toc68458171 \h 25
ERLINK \l “_Toc68458172” moveFocus PAGEREF _Toc68458172 \h 26
ERLINK \l “_Toc68458173” openDialog PAGEREF _Toc68458173 \h 26
ERLINK \l “_Toc68458174” Inserting code when the document loads PAGEREF _Toc68458174 \h 27
ERLINK \l “_Toc68458175” Calling the file browsers from outside of WysiwygPro PAGEREF _Toc68458175 \h 27
ERLINK \l “_Toc68458176” Retrieving code from a form post PAGEREF _Toc68458176 \h 27
ERLINK \l “_Toc68458177” Dealing with malicious code PAGEREF _Toc68458177 \h 28
ERLINK \l “_Toc68458178” Tidying up your code PAGEREF _Toc68458178 \h 30
ERLINK \l “_Toc68458179” Dealing with PHP tags or other non-html content PAGEREF _Toc68458179 \h 31
ERLINK \l “_Toc68458180” Extending the editor PAGEREF _Toc68458180 \h 32
ERLINK \l “_Toc68458181” Adding a spell checker PAGEREF _Toc68458181 \h 32
ERLINK \l “_Toc68458182” Connecting to an existing file management system. PAGEREF _Toc68458182 \h 32
ERLINK \l “_Toc68458183” Frequently Asked Questions PAGEREF _Toc68458183 \h 32
ERLINK \l “_Toc68458184” I see a message that says: Warning: Cannot add header information PAGEREF _Toc68458184 \h 32
ERLINK \l “_Toc68458185” The editor displays but the toolbar buttons appear as broken images PAGEREF _Toc68458185 \h 33
ERLINK \l “_Toc68458186” The image or document manager displays but images appear as broken images PAGEREF _Toc68458186 \h 33
ERLINK \l “_Toc68458187” How can I insert code into the editor so that I can edit an existing record PAGEREF _Toc68458187 \h 33
ERLINK \l “_Toc68458188” I want to locate my image folder under a different domain to the editor PAGEREF _Toc68458188 \h 33
ERLINK \l “_Toc68458189” The code that I am editing will be placed under a different domain to the editor PAGEREF _Toc68458189 \h 33
ERLINK \l “_Toc68458190” I want to set different image and document directories for different users PAGEREF _Toc68458190 \h 34
ERLINK \l “_Toc68458191” I want to have more than one editor on the same page PAGEREF _Toc68458191 \h 34
ERLINK \l “_Toc68458192” I want to translate the editor to a different language PAGEREF _Toc68458192 \h 34
Licensing and Disclaimer

Installation of this software means that you agree to be bound by the terms of the enclosed license agreement.

Make sure that you have read and understand the license before installing.

DISCLAIMER:
WysiwygPro is only an editor; how you get code into WysiwygPro and what you do with code generated by WysiwygPro is your business.
It is your responsibility to ensure that you use WysiwygPro in a secure manner that will not leave your server open to attack or other damage.
ViziMetrics accepts no responsibility for damages resulting from the use of WysiwygPro.

Introduction

WysiwygPro is a WYSIWYG editing component that you can embed in any PHP script. It allows you to replace regular tags with a rich text HTML editor.

WysiwygPro makes use of the MSHTML editing component in Internet Explorer and the Midas Editing component in Gecko based browsers.

For support, updates or error reporting please visit us online at http://www.wysiwygpro.com

Email: Service@WysiwygPro.com

When looking at the syntax for functions described in this manual refer to the following:

boolean indicates that the following parameter should be true or false.
string indicates that the following parameter should be a string
int indicates that the following parameter should be in integer
array indicates the following parameter is an array.
Parameters enclosed in square brackets are optional.

Please be careful when copying and pasting code from this manual. Due to the nature of Word documents the example code in this manual features curly quotes where there should be straight quotes, most code editors will convert these when you paste but some do not.

Requirements

Supported browsers:*

Windows (all)

OS 8.6 and 9.x

Mac OS X/Linux/Unix

Internet Explorer 5.0+
Netscape 7.1+
Mozilla 1.4+
Firefox 0.7+
Or any browser based on Mozilla 1.4+

Any browser based on Mozilla 1.3+, you can find one here: http://www.wamcom.org/
(This link is correct as of 2nd April 2004)

Netscape 7.1+
Mozilla 1.4+
Firefox 0.7+
Or any browser based on Mozilla 1.4+

*In Gecko based browsers such as Mozilla the cut, copy, and paste buttons are not available due to security restrictions in these browsers. Standard keyboard shortcuts for these functions are still available. Right click menus are also unavailable but note that this does not restrict the functionality of the editor.

Server Requirements:

PHP 4.1.3 or newer

Upgrading From An Earlier Version

Be sure to backup your old installation before proceeding to install this one. You can obtain copies of all previous and future versions from: http://www.wysiwygpro.com/support/updates.php

Upgrading from ZeusEdit 0.x, 1.x
If you are upgrading from ZeusEdit you will need to start your installation again from scratch as WysiwygPro 2.x is a completely different product. Note that WysiwygPro requires PHP.

Upgrading from versions 2.0 or 2.0.1
Simply install the new product over your old installation. Note that the configuration file is significantly different to your current version. You will need to set up the new configuration file. Read the installation section carefully. JavaScript API is also significantly different due to the new support for multiple instances. You will need to check any JavaScript that you are using to communicate with your editor. See the section on JavaScript API.

Upgrading from version 2.1
Simply install the new product over your old installation. Note that there a few extra variables in the config file that you may need to check.
JavaScript API is significantly different due to the new support for multiple instances. You will need to check any JavaScript that you are using to communicate with your editor. See the section on JavaScript API. If your application is not using JavaScript to communicate with the editor then you shouldn’t need to make any modifications to your application.

Things to watch out for:

If you intend to use multiple instances make sure you give each instance a unique name with the set_name function.

There was a very significant problem with versions prior to 2.2: In Internet Explorer it would generate HTML markup, but in Mozilla it would generate inline styles. This meant that Internet Explorer could not edit formatting done in Mozilla and vice-versa. To overcome this the editor now produces the same HTML markup in both browsers. THIS MEANS THAT EXISTING FORMATTING DONE IN MOZILLA BASED BROWSERS WITH VERSIONS PRIOR TO 2.2 MAY BE UNEDITABLE IN THIS VERSION! If this is a problem for you then you must either convert all inline style markup done in Mozilla before installation or not install this version.

What’s new in versions 2.2.x?

Multiple instances (2.2)
Multiple user interface languages (2.2)
Customise the color palate with the set_color_swatches function (2.2)
Set the image directory using the set_img_dir function (2.2)
Set the document directory using the set_doc_dir function (2.2)
Preview tab (2.2)
Background images for tables and table cells (2.2)
New guidlines_visible method allows you to set whether guidelines are on or off by default (2.2.2)
New fixcharacters function allows you to encode special characters (2.2.2)
New email_encode function allows you to hex encode email links (2.2.2)
New comm2asp function allows you to convert ASP code back into ASP code (2.2.2)
New wp_current_obj JavaScript object allows you to access the currently active editor if there is more than one editor on a page (2.2.2)
Installation

Step 1:
Copy the ‘editor_files’ folder onto your web server. The folder can be placed inside any directory under the document root.

If you’re integrating WysiwygPro with MAMBO, upload the contents of the WP editor_files folder into the MOS editor folder and rename it to “wysiwygpro”. Also, set the “WYSIWYG Editor” parameter in the MOS global configuration to “wysiwygpro”

Step 2:
Open ‘config.php’ in your favourite PHP code editor (You can open it in Notepad if you have nothing else)

Step 3:
Set the global variables at the top of the file to match your web server configuration. You will find detailed instructions before each variable.

If you are having difficulty setting up your config.php file feel free to send us an email. Your web hosting company might also be able to help.

The other variables in this file affect file permissions in the image and document manager windows, you can change these if you wish.

Step 4:
If you are intending to use WysiwygPro’s configuration saving features make sure you have set the file permissions for the SAVE_DIRECTORY to read/write, see the section on Saving configurations and notes on file caching for more information.

Similarly if you intend to use any file management features in the image and document dialogs make sure the file permissions for the IMAGE_FILE_DIRECTORY and DOCUMENT_FILE_DIRECTORY are also set to read/write. You should be able to do this from your ftp program.

If you are having difficulties setting file permissions on your web server please contact your Web Hosting Company or the company that supplied your server.

Troubleshooting
To check your installation create the PHP script below and run it on your server.
If there are any errors in your config.php file WysiwygPro should inform you.
If the editor displays but all the toolbar buttons show as broken images you need to check you WP_WEB_DIRECTORY setting in config.php.
If the image manager displays but the images show as broken links then you need to check your IMAGE_WEB_DIRECTORY setting in config.php.
Similarly if the document manager displays but the images show as broken links then you need to check your DOCUMENT_WEB_DIRECTORY setting in config.php.

If you are having difficulty installing and running WysiwygPro please check the Frequently Asked Questions at the end of this manual.

Embedding in a PHP script

Create a PHP file and put the following code in it:

My Editor

print_editor(700, 400);

?>

Run the script and you should see the editor embedded in the page.

Note that before any HTML tags, echo statements or any other browser output you must put ob_start(); and after all browser output put ob_end_flush(); In most cases this simply means putting ob_start(); at the top of your script and ob_end_flush(); at the end. If you get errors that say ‘headers already sent by…’ this means that you have forgotten to use ob_start() and ob_end_flush()

Note that the editor should always be printed within a form and that the form MUST have the following onSubmit event handler: submit_form (); without this event handler the updated HTML code will not be sent when the form is submitted.

The width and height of the editor is set in the print_editor () function. If you do not provide width and height parameters the editor will use its default dimensions of 680×390. You can set the width of the editor as a percentage but the height must always be fixed. To set the width as a percentage enclose it in speech marks: $editor->print_editor(‘100%’, 500);

There is an alternative function to print_editor() called return_editor() this function returns all the HTML and JavaScript as a variable rather than printing it to the browser. This is useful if you want to display the editor using a template engine.

Example:

$procode = $editor->return_editor([int width, int height]);

You can then print $procode using your template engine.

If you are having difficulty installing and running WysiwygPro please check the Frequently Asked Questions at the end of this manual.

PHP API

The WysiwygPro class has a number of configuration functions that you can call before calling print_editor(). These functions allow you to customise the appearance and functionality of wysiwygPro.

Example: to start the editor with some HTML ready for editing:

set_code(‘

This is the HTML code I want to edit

‘);

// print the editor to the browser
$editor->print_editor(700, 400);

?>

set_name

Syntax: $editor->set_name(string name);

The single parameter sets the name of the textarea that will hold the edited HTML code, by default this is named ‘htmlCode’. This is important because this will become the name of the index in the $_POST array when you go to retrieve the code from a form post. For more information see the section on Retrieving code from a form post.

If you are replacing a tag with WysiwygPro use set_name to give WysiwygPro the same name as the you are replacing.

If you intend to place more than one editor on the same page you must give each editor a unique name. See the section on Multiple Instances.

This name will also be the name you use to access the editor with JavaScript. See the section on JavaScript API.

set_instance_lang

Syntax: $editor->set_instance_lang(string language_file);

This function overrides the DEFAULT_LANG setting in config.php. Call this function to generate an instance of the editor in a different language to the default language.

The single parameter is the language file to use.

See the section on Multiple Languages for further information.

subsequent

Syntax: $editor->subsequent(true);

If you have more than one editor on a page it is recommended that you call the subsequent() function on all editors except the first editor. The subsequent function will generate a specially configured editor that will share resources with the first editor on the page. This will greatly improve performance. Note that if you do not use the subsequent() function your multiple instances will still run, but may load slower than necessary. Also be aware that if you call subsequent for every editor on the page then none of the editors will run. This is because subsequent editors are entirely dependant on the first editor, so if the first editor is also subsequent the script resources will not be available and the editors will not initiate.

set_code

Sets the code that will be inserted into the editor at start-up.

Syntax: $editor->set_code(string html_code);

The single parameter is the code you want inserted. You will probably want to get this from a file or database. You do not need to do any pre-processing of the HTML code before sending it to the editor class. WysiwygPro will do all necessary formatting of your code to achieve correct display in the editor including stripslashes.

usexhtml

Tells the editor to generate XHTML 1.0 transitional instead of the default HTML 4.01 transitional.

Syntax: $editor->usexhtml(true, [string character_encoding, string lang]);

The first parameter is true or false. It should always be true.
The second parameter is the character encoding that the editor should use for the XML declaration. The default is “UTF-8”
The third parameter is the value for lang attributes for the HTML tag. The default is “en”

If you are using the editor to edit PHP documents please read the section on Dealing with PHP tags or other non-html content

usep

Syntax: $editor->usep(true);

Tells the editor to use

on enter rather than the default

Using the default

tags creates single line returns on enter key press which results in an editing experience similar to Word.
Using

tags on enter key press results in double spaced returns and thus a similar editing experience to Dreamweaver.
In both modes you can insert a
tag by pressing shift+enter.

set_baseurl

Syntax: $editor->set_baseurl(string baseurl);

Sets the baseURL of the HTML being edited. This is useful if the HTML is to reside in a directory other than the editor and contains relatively linked images or other relatively linked elements. This ensures that the editor’s WYSIWYG view does not show broken images etc. More importantly it ensures that any link you insert into the document will be formatted correctly. It is recommended that you always set a base URL.

Unlike a desktop WYSIWYG editor which opens and edits files on your hard-drive wysiwygPro has no way of knowing where the HTML code it is editing will be located. By setting the baseurl to the location of the document you are editing wysiwygPro will then know how to display any relative URLs in your document. The set_baseurl function has the same effect as including a tag in the head of your document.

If the code you are editing will reside under a different domain to the editor then set the baseurl to the domain under which your code will reside. In config.php set ‘Domain Address’ to ‘‘.

usefullurls

Syntax: $editor->usefullurls(true);

Tells the editor to use full URL schemas including the domain name etc when addressing links.

If you have not set a base URL wysiwygPro will assume that all links should be addressed from the root level of your server, however if you are using wysiwygPro for editing emails or other material that will not reside on the current server you should call this function so that the editor will use full URLs.

In this mode the editor should convert any relative URL’s to full URL’s

Note that if you have set a base URL this setting will be overridden.

guidelines_visible

Syntax: $editor->guidelines_visible(boolean);

By default wysiwygPro will show dashed guidelines around invisible table cells so that you can see them. This function allows you to change whether guidelines are on or off by default.
Setting the single parameter to true will result in guidelines being on by default, setting it to false will mean that guidelines are off by default. Either way users can toggle guidelines on or off by clicking the ‘Guidelines Visible’ link at the bottom right corner of the editor.

set_stylesheet

Syntax: $editor->set_stylesheet(string path_to_stylesheet);

Applies a stylesheet to the editor’s WYSIWYG view. If you have set the baseurl you will need to take this into account when specifying the path to the stylesheet. This function is useful if you are editing a snippet of HTML body code. If you are editing an entire HTML document that specifies a stylesheet in it’s then there is no need to use this function.

This is how you would set the default font and background color for editing a document fragment.

set_formatmenu

Syntax: $editor->set_formatmenu(array formats);

Allows you to customize the format menu. The parameter is an array where the index value in each row specifies the tag and the second value specifies a description of that tag to appear in the menu.

Example

$editor->set_formatmenu(array(
‘p’ => ‘Paragraph’,
‘h1’ => ‘Heading 1’,
‘h2’ => ‘Heading 2’,
));

set_classmenu

Syntax: $editor->set_classmenu(array classNames_and_descriptions);

Builds a custom drop-down menu of classes that can be applied to selected text. The parameter is an array where the index value in each row specifies the className and the second value specifies a description to appear in the menu.

Example

$editor->set_classmenu(array(
‘className’ => ‘Name to appear in menu’,
‘anotherClass’ => ‘Another name’,
));

Make sure that the classes exist in a stylesheet attached to the document being edited or are specified in the documents head.

set_fontmenu

Syntax: $editor->set_fontmenu(string fonts);

The parameter is a semi colon separated list of font names that you want to display in the font drop down menu. This will override the default fonts in the menu. All font names MUST start with a capital letter. A semi colon rather than a comma should separate the fonts so that you can use commas to list alternate fonts.

Basic example:

$editor->set_fontmenu(‘Verdana; Arial; Webdings’);

Alternate fonts example:

$editor->set_fontmenu(‘Verdana, Arial, Helvetica, sans-serif; Arial, Helvetica, sans-serif; Webdings’);

set_sizemenu

Syntax: $editor->set_sizemenu(array sizes);

Allows you to customize the font size menu. The parameter is an array where the index value in each row specifies a size (a number from 1-7) and the second value specifies a description of that size to appear in the menu.

Example

$editor->set_sizemenu(array(
‘1’ => ‘1 (8 pt)’,
‘2’ => ‘2 (10 pt)’,
‘3’ => ‘3 (12 pt)’,
‘4’ => ‘4 (14 pt)’,
‘5’ => ‘5 (16 pt)’,
));

removebuttons

Syntax: $editor->removebuttons(string unwanted_buttons);

The parameter is a comma-separated list of buttons you do NOT want displayed on the toolbars.

The table below shows the button identifier names:

Button Name

Description

tab

Removes all tabs from the bottom of the editor

html

Removes just the HTML Source tab

preview

Removes just the preview tab

print

find

spacer1

The first spacer on the toolbar

pasteword

The button for pasting cleaned html from Word

spacer2

The second spacer on the toolbar.

undo

redo

spacer3

The third spacer on the toolbar.

tbl

All table insertion and editing buttons

edittable

Table editing buttons.

spacer4

The fourth spacer on the toolbar.

border

Show/Hide guidelines button

image

Insert an image

smiley

Insert and Emoticon smiley

ruler

Insert a horizontal rule

link

Create/Edit a hyperlink

document

Link to a downloadable document

bookmark

The button for inserting a bookmark (named anchor)

special

Insert a special character

custom

Insert a custom site object

format

The format list dropdown

font

The font menu

size

The font size menu

class

The customisable class menu

spacer5

The fifth spacer on the toolbar.

bold

Bold text

italic

Italic text

underline

Underline text

spacer6

The sixth spacer on the toolbar.

left

Justify left

center

Justify center

right

Justify right

full

Justify full

spacer7

The seventh spacer on the toolbar.

ol

Ordered (numbered) list

ul

Unordered list

indent

Indent

outdent

Outdent

spacer8

The eighth spacer on the toolbar.

color

Font color

highlight

Font highlight

addbutton

Syntax: $editor->addbutton(string name, string location, string function, string URL, [ int width, int height, string commandIdentifier);

This function allows you to add a custom button to the toolbar. You need to call it for each button you wish to add.

Name will appear as a tool tip when users mouse over the button and will also be used as the button identifier name so that you can position other buttons around your new button.

Location specifies where to place the button on the toolbar. To place the button after a specific button this value should be ‘after:’ followed directly by the identifier name for the button you want to position the button after. To place the button before a specific button this value should be the word ‘before:’ followed directly by the identifier name for the button you want to position the button before. For example to add the button after the print button this value should be set to ‘after:print’, to place the button before the print button this value should be set to ‘before:print’.

Function should be the JavaScript function to perform when users click the button. Please see the section on JavaScript API for a list of available JavaScript methods.

URL should be the web address to the image you want to use as the button.

Width is optional and sets the width of the button.

Height is optional and sets the height of the button.

CommandIdentifier is optional and should only be set if you know what you are doing!. This value will set under what selection state your button will appear disabled. It should be a Microsoft Command Identifier. See this address for more information: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp

In all parameters you can use ##name## to represent the name of the current editor and ##directory## to represent the web path to your editor_files folder.

General examples:

To add a new button after the hyperlink button:$editor->addbutton(‘My New Button’, ‘after:link’, ‘myFunction()’, ‘/images/button.gif’, 22, 22);

$editor->addbutton(‘My New Button’, ‘before:print’, ‘myFunction()’, ‘/images/button.gif’, 22, 22);

Real world examples:

Add a superscript button:

$editor->addbutton(‘Superscript’, ‘after:underline’, “wp_callFormatting (##name##, ‘superscript’)”, ‘##directory##/images/superscript.gif’, 22, 22, ‘superscript’);

Add a subscript button:

$editor->addbutton(‘Subscript’, ‘after:underline’, “wp_callFormatting (##name##, ‘subscript’)”, ‘##directory##/images/subscript.gif’, 22, 22, ‘subscript’);

Add a strikethrough button:

$editor->addbutton(‘Strikethrough’, ‘after:underline’, “wp_callFormatting (##name##, ‘Strikethrough’)”, ‘##directory##/images/strikethrough.gif’, 22, 22, ‘Strikethrough’);

Add a remove formatting button:

$editor->addbutton(‘Remove Formatting’, ‘after:underline’, “wp_callFormatting (##name##, ‘RemoveFormat’)”, ‘##directory##/images/remove_formatting.gif’, 22, 22, ‘RemoveFormat’);

Add a button that pastes text or a HTML fragment at the current cursor position:

$editor->addbutton(‘Insert Something’, ‘after:underline’, “##name##.insertAtSelection(‘some html here’)”, ‘##directory##/images/insert.gif’, 22, 22);

Add a button that opens a custom dialog window:

$editor->addbutton(‘Open Dialog’, ‘after:underline’, “##name##.openDialog(‘myWindow.php’, ‘modal’, 400, 500)”, ‘##directory##/images/open.gif’, 22, 22);

See JavaScript API for more JavaScript functions that you can use with your buttons.

addspacer

Syntax: $editor->addspacer(string name, string location);

This function allows you to add a spacer to the toolbar.

The 1st parameter allows you to give the spacer a name. The name you give the spacer will become the identifier name for that spacer making it possible to add other buttons or spacers next to that spacer.

The second parameter specifies where to place the spacer on the toolbar. To place the spacer after a specific button this value should be the word ‘after:’ followed directly by the identifier name for the button you want to position the spacer after. To place the spacer before a specific button this value should be the word ‘before:’ followed directly by the identifier name for the button you want to position the spacer before. For example to add the spacer after the print button this value should be set to ‘after:print’, to place the spacer before the print button this value should be set to ‘before:print’.

Example:

To add a spacer after the Insert an image button:$editor->addspacer(‘My Spacer’, ‘after:image’);

set_savebutton

Syntax: $editor->set_savebutton(string button name, [string URL, int width, int height] );

Call this function to add an optional save button to the toolbar. This button will simply submit the form containing the editor.

The first value should be the name of the button, this will appear as a tool tip. The editor provides three pre-set values these are ‘Save’, ‘Post’ and ‘Send’. Save will display a standard save button suitable for Content Management Systems, Send will display a send button suitable for web-email systems and Post will display a post button suitable for discussion forums.

The second value is optional and should be the URL to the image you want to display as the button. This allows you to set a custom button.

The third value should be the width for your custom button and the last value should be the height for the custom button.

Examples:To display the provided save button:$editor->set_savebutton(‘Save’);$editor->set_savebutton(‘Submit’, ‘http://www.mysite.com/images/submit.gif’, 22, 22):

disableimgmngr

Syntax: $editor->disableimgmngr(true);

Call this function to disable the image manager. The editor will display a simple dialog where the user can enter a URL to an image.

set_inserts

$editor->set_inserts(array descrptions_and_code);

Adds custom inserts to the ‘Insert a Site Object’ window. Use this to create a clip art gallery of ready-made items that users can insert into their page. These items can be any snippet of HTML code. The parameter is an array where the key in each row is a brief description of the object and the value is the html code for the object. Note that objects cannot contain script tags.

Example:

$editor->set_inserts(array(
‘Company Logo’ => ‘‘,
‘Company Address’ => ‘2/99 Nowhere Sreet, Nowhereville’,
));

Note that if you do not set any inserts this button will not be displayed on the toolbar.

set_color_swatches

$editor->set_color_swatches(string color_values);

This function will add a custom color palette to the select color dialog. Use this function to give clients quick access to the colors used on their website.

The single parameter is a comma separated list of color values.

Example:

$editor->set_color_swatches(‘#003366,#000033,#000066,#eeeeee’);

You can add up to 216 custom colors.

set_links

$editor->set_links(array indent_url_text);

The parameter needs to be a 2D array with three values in each row. The first value in each row should be the indent level for that link, the second value should be the link’s URL, to display a folder instead of a link to a page put ‘folder’ as the URL. The third should be the text to appear on the link. You should avoid adding links that have the same URL as another link.

Example:

$editor->set_links(array(
array(‘0’, ‘/myfolder/page1.htm’, ‘Page One’),
array(‘0’, ‘folder’, ‘Folder One’),
array(‘1’, ‘/myfolder/page2.htm’, ‘Page Two’),
array(‘1’, ‘/myfolder/page3.htm’, ‘Page Three’),
));

The links should be correctly URL encoded i.e. spaces should be written as %20 etc. You could use PHP’s urlencode() function to do this.

Ideally the links should be addressed from the server root. When a link is inserted the editor will format the link correctly depending on your base URL setting.

If the document being edited will reside under a different domain to the editor then the links should be full URLs e.g.: ‘http://www.mysite.com/folder/page.htm’

It should be fairly easy to generate this array dynamically based on the directory or database structure of your site. See the simple file editor example in the examples folder.

Note that to display a simple link dialogue instead you can use the disablelinkmngr function.

disablebookmarkmngr

Syntax: $editor->disablebookmarkmngr(true);

Removes the Place on this page tab from the hyperlink window.

disablelinkmngr

Syntax: $editor->disablelinkmngr(true);

Call this function to force the editor to display a simple link dialog. Do not call this function if you have called set_links.

set_img_dir

Syntax: $editor->set_img_dir(string trusted_directory_id);

This function allows you to override the default IMAGE_FILE_DIRECTORY and IMAGE_WEB_DIRECTORY settings. The single parameter is the key name from the $trusted_directories array in config.php. If the key cannot be found the editor will default to the IMAGE_FILE_DIRECTORY and IMAGE_WEB_DIRECTORY settings.

For security reasons you cannot set the image directory to one that doesn’t exist in the $trusted_directories array in config.php. This doesn’t have to be restrictive as you could dynamically generate the $trusted_directories array.

set_doc_dir

Syntax: $editor->set_doc_dir(string trusted_directory_id);

This function allows you to override the default DOCUMENT_FILE_DIRECTORY and DOCUMENT_WEB_DIRECTORY settings. The single parameter is the key name from the $trusted_directories array in config.php.

If the key cannot be found the editor will default to the DOCUMENT_FILE_DIRECTORY and DOCUMENT_WEB_DIRECTORY settings.

For security reasons you cannot set the document directory to one that doesn’t exist in the $trusted_directories array in config.php. This doesn’t have to be restrictive as you could dynamically generate the $trusted_directories array.

Multiple Instances

You can place as many instances of WysiwygPro in a page as you require so long as each instance has been given a unique name with the set_name() function. If you have editors on the same page that have the same name then no editors on the page will run!

It is also recommended that you call the subsequent() function on all editors except the first editor. The subsequent function will generate a specially configured editor that will share resources with the first editor on the page. This will greatly improve performance. Note that if you do not use the subsequent() function your multiple instances will still run, but may load slower than necessary. Also be aware that if you call subsequent for every editor on the page then none of the editors will run. This is because subsequent editors are entirely dependant on the first editor, so if the first editor is also subsequent the editors cannot initiate.

Example:
The following script will generate a page with three editors on it:

My Editors

set_name(‘wp1’);

// print the editor to the browser:

$editor->print_editor(700, 400);

// Editor two ———————————–

// create a new instance of the wysiwygPro class:

$editor2 = new wysiwygPro();

//give the editor a unique name:

$editor2->set_name(‘wp2’);

// make this editor subsequent:

$editor2->subsequent(true);

// print the editor to the browser:

$editor2->print_editor(700, 400);

// Editor three ———————————–

// create a new instance of the wysiwygPro class:

$editor3 = new wysiwygPro();

// give the editor a unique name:

$editor3->set_name(‘wp3’);

// make this editor subsequent:

$editor3->subsequent(true);

// print the editor to the browser:

$editor3->print_editor(700, 400);

?>

Multiple Languages

Changing the language used in the editor’s interface is as simple as creating a new language file. Language files are stored in [installation directory]/editor_files/lang/

To create new language files first make a copy of en-us.php and give it an appropriate name such as ger.php. Then translate all the variable values contained in the file to your required language.

The default language file used is set by the DEFAULT_LANG constant in config.php.

You can override the default language file for a particular instance of the editor using the set_instance_lang function. By using the set_instance_lang function it is possible to have multiple instances of the editor on the same page, each in a different language.

Saving configurations and notes on file caching

WysiwygPro tailors its output to match the capabilities of the client’s browser; because of this any caching of the page containing wysiwygPro by the server will result in the wrong output being sent to client browsers.

If you do need to reduce server overhead you can use WysiwygPro’s configuration saving feature. If you intend to make use of this feature first make sure that the file permissions for the SAVE_DIRECTORY are set to read/write. This directory is specified in ‘editor_files/config.php’ the default location is ‘editor_files/save/’ Secondly set the length of time that a saved configuration should be kept before re-generation. This is also specified in ‘editor_files/config.php’

With this done all you need to do is add a parameter when declaring a new instance of the WysiwygPro class object. This parameter should be a string defining the name to save your configuration. WysiwygPro will use this parameter to form the basis of the filename for this configuration file.

Example:

Instead of typing:

$editor = new wysiwygPro();

Type:

$editor = new wysiwygPro(‘my_configuration’);

Every time that an instance of WysiwygPro is requested with the same configuration name and the saved configuration file exists and has not expired the editor will be generated from the saved file.

Make sure that if you have an instance of WysiwygPro that uses a different configuration that you give it a different configuration name!

If you are using multiple instances of WysiwygPro on the same page each instance must have a different configuration name.

When a saved configuration is requested and the saved configuration file has not expired WysiwygPro will skip out of all configuration functions except set_code so you can still insert different code into a saved configuration.

Generating the editor from a configuration file can be as much as 10 times faster than a full generation and is recommended for high load applications such as a busy discussion forum.

As mentioned before when a saved configuration has not expired WysiwygPro will ignore all configuration functions thus reducing server overhead. However you might have processor intensive routines in your script that do not need to be run if the saved configuration has not expired. For example if your script does a large database query to build the links array for the set_links function this would be a pointless waist of resources if the editor is just going to be generated from the saved file.

You can detect if the editor has expired by checking the value of the $has_expired variable like this:

// create a new instance of the wysiwygPro class

$editor = new wysiwygPro(‘my_configuration’);

// insert some HTML

$editor->set_code(‘

This is the HTML code I want to edit

‘);

if ($editor->has_expired) {

// do database queries and other configuration functions here

}

// print the editor to the browser

$editor->print_editor(700, 400);

JavaScript API

There may be times when you need to access the editor using JavaScript on the page running the editor.

Note that JavaScript API is significantly different to versions prior to 2.2 because you can now have more than one instance of the editor on a page and you need to be able to specify which editor you want to access.

Before you start!

Before you can do anything with JavaScript you need to be able to specify which editor you want to communicate with, this is because you can place more than one editor on a page.

In order to do this you must know the name of the editor you wish to access. You can give an editor a name using the set_name PHP function. If you have not given an editor a name the default name is htmlCode.

When the document loads a JavaScript object is created for each editor, this object has the same name as the editor.

If there is more than one editor on your page the currently active or last used editor is held in an alias called wp_current_obj. If no editor is currently active wp_current_obj will be set to null. You should always check that wp_current_obj is not null before attempting to access the current editor.

Note: Please avoid any JavaScript functions other than the functions described in this manual. Functions not described in this manual are subject to change in future versions.

getCode

Syntax: variable = object.getCode();

This function will return the code currently in the editor.

The following example will get the HTML code currently in the editor named ‘myEditor’:

var code = myEditor.getCode();

The variable ‘code’ now contains the HTML code currently in the editor.

If there is more than one editor on your page and you want to get the code from whichever editor is currently in use:

if (wp_current_obj) {
var code = wp_current_obj.getCode();
} else {
alert(‘There is no active editor’);
}

wp_current_obj is an alias for the currently active editor and can be used if you do not know the name of the editor you are trying to access.

getPreviewCode

Syntax: variable = object.getPreviewCode();

This function is intended to help you build custom preview functions. It will return the code currently in the editor, but will add stylesheet and baseurl information to ensure that the code displays correctly.

The following example uses the getPreviewCode function to create a popup preview window:

Untitled

set_name(‘myEditor’);

$editor->set_code(‘

This is the HTML code I want to edit

‘);

$editor->print_editor(700, 400);

?>

getSelectedText

Syntax: variable = object.getSelectedText();

This function will return the currently selected text.

Example:
The following example will get the currently selected text in the editor named ‘myEditor’:

var text = myEditor.getSelectedText();

The variable ‘text’ now contains the selected text.

setCode

Syntax: object.setCode(string html);

This function will overwrite all code in the editor with new html.
The parameter is a string containing the code you want to insert.

Example:
The following example will overwrite the HTML code currently in the editor named ‘myEditor’:

myEditor.setCode(‘The code I want to insert’);

Note: This function can only be used after the document has loaded and all the editor objects on the page have been initiated. To load html into an editor when the page loads see: Inserting code when the document loads.

insertAtSelection

Syntax: object.insertAtSelection (string html);

This function will insert code at the current cursor position or overwrite the current selection.
The parameter is a string containing the code you want to insert.

Example:
The following example will insert code into the editor named ‘myEditor’:

myEditor.insertAtSelection (‘The code I want to insert’);

updateHTML

Syntax: object.updateHTML ();

Each editor stores HTML code in a regular textarea. This function will update an editor’s textarea with the latest edited HTML from the WYSIWYG view.

updateWysiwyg

Syntax: object.updateWysiwyg ();

Each editor stores HTML code in a regular textarea. This function will update an editor’s WYSIWYG view with code from the textarea. Note that if the code in the textarea is older than the code in the WYSIWYG view then this will have the effect of an undo.

showDesign

Syntax: object.showDesign ();

Switches an editor to the regular design view.

showCode

Syntax: object.showCode ();

Switches an editor to HTML source view.

showPreview

Syntax: object.showPreview ();

Switches an editor to preview mode.

submit_form

Syntax: submit_form()

No parameters are required.

This function will update the textareas for each editor on the page ready for form submission. It should be called just before a form containing the editor is submitted.

Preferably this should be placed in an onSubmit event handler on the form object. Alternatively this could be placed on an onClick event handler for the button that will submit the form.

If you do not use this function your edited HTML will not be submitted!

updateAllHTML

Syntax: updateAllHTML()

No parameters are required.

This is simply a wrapper for the submit_form function.

It will update the textareas for each editor on the page. (Each editor stores the html code you are editing in a regular )

updateAllWysiwyg

Syntax: updateAllWysiwyg()

No parameters are required.

This will update all WYSIWYG views with the html in their respective textareas. If the html contained in a textarea is older than the html in the WYSIWYG view then this will have the effect of an undo.

moveFocus

Syntax: object.moveFocus()

This will focus an editor, you should use the moveFocus() function instead of the regular focus() function. Note that this will move the focus to the editing area not the toolbar.

Example:
The following example will move the focus to the editor named myEditor:

myEditor.moveFocus()

openDialog

Syntax: object.openDialog(string url, string modal, integer width, integer height [, features])

This will popup a dialog window. Dialog windows float permanently above the application and any open dialogs will close when the main browser window closes or when the user navigates away from the page. In Windows dialog windows will not create a taskbar button.

The fist parameter is the url to the html document you wish to popup as a dialog window.
The second parameter should be set to either ‘modal’ or ‘modeless’. This parameter will unfortunately only have effect in Internet Explorer. When set to ‘modal’ the dialog will float above the application and the user will not be able to click back to the application until they close the dialog window. If set to ‘modeless’ the user will be able to click back onto the application. Unfortunately in Mozilla the dialog will always behave in ‘modeless’ mode.
Width should be set to the width of the dialog while height should be set to the height of the dialog.
The last optional parameter should be a string of any extra features you want enabled, such as status bars and scroll bars. This string should follow the same format as the features parameter in the window.open JavaScript method.

Example:
The following example will tell the editor named myEditor to open a dialog window:

myEditor.openDialog(‘folder/dialog.htm’, ‘modal’, 300, 400, ‘scrollbars=yes,status=yes’)

Note: the dialog window will automatically be positioned in the center of the screen unless you specify otherwise in the features parameter.

Once you have popped up your dialog you will probably want to be able to access the editor that opened the dialog, to do this include the following code in the head of your dialog window:

This will create two JavaScript objects. The first object is called obj and holds the editor that opened the dialog. This object will enable you to access the editor that opened the dialog without the need to know what that editor was named. For example to insert html into the editor that opened the dialog you would use: obj.insertAtSelection (‘some html code’)
The second JavaScript object that is created is called parentWindow and holds the window containing the editor, this will enable you to access the document that contains the editor. Note that the usual window.opener object will not work in both Internet Explorer and Mozilla, you must use parentWindow instead.

To open another dialog window from a dialog window you must use:

wp_openDialog(‘folder/dialog.htm’, ‘modal’, 300, 400, ‘scrollbars=yes,status=yes’)

Dialog windows opened from a dialog window using this function will behave exactly like a dialog opened using editor.openDialog() except that parentWindow will point to the dialog that opened the dialog.

Inserting code when the document loads

You cannot use the code insertion functions mentioned above when inserting code as the document loads because the editor objects may not be initiated or ready to accept code. Instead you must insert the code before the page has finished loading.

To do this place the following JavaScript into the bottom of your script:

document.getElementById(‘myEditor’).value = ‘The code I want to insert’;

Replace ‘myEditor’ with the name of the editor you wish to access. Note that this must be quoted because it has not yet been turned into an object.

Note that it is highly recommended that you use the set_code PHP method described under PHP API rather than setting code with JavaScript.

Calling the file browsers from outside of WysiwygPro

You can use the file browsers in HTML forms outside of WysiwygPro. For an example of how to do this see the Pop_Up_File_Manager in the examples folder.

Retrieving code from a form post

Make sure that WysiwygPro is placed within a form and that the form has the onsubmit=submit_form() event handler as described in the ‘Embedding in a PHP script’ section. If you have not added onsubmit=submit_form() to your form tag you will not be able to retrieve code from a form post.

When the form is submitted WysiwygPro will behave exactly as if it were a textarea named whatever you supplied when you called set_name() if you did not call this function the default name is htmlCode.

Example:

In the following example we are going to create a PHP script to display the editor and a second PHP script to retrieve the code and display it.

Create a PHP script called ‘editor.php’ and put the following code in it:

Untitled

set_name(‘myEditorCode’);

$editor->print_editor(700, 400);

?>

Create a second PHP script and call it ‘display.php’ and put the following in it:

Run the first script and you should see the editor displayed. Type up a document in the editor and click ‘Submit’. The data will be sent to the second PHP script, which will display it.

In an actual document editing system you would save this data to a database or file rather than displaying it. Please see the simple_file_editor example application in the examples folder.

Dealing with malicious code

If you are using WysiwygPro in a publicly accessible application such as a web mail system or discussion forum you will need to consider how to deal with malicious code. WysiwygPro includes some useful functions that you can use to process HTML sent from WysiwygPro. These functions will help you to strip out malicious code before saving the code to your database.

To use these functions first include ‘[installation directory]/editor_files/editor_functions.php’ in the script that will receive the code from the form post.

Breaking up excessively long words

If users post excessively long words this can break-apart the design of your site. This function will cut words that are over a certain length.

Function name: longwordbreak

Syntax:

longwordbreak (string html_code [, integer length, string cut]);

Parameters:

html_code: is the code sent from the form post that you want to process.
Length: optional, words over this length will be cut, the default value is 40
cut: optional, long words will be cut using this value. The default is a space.

Example:
In the following example $code holds the code sent from the form post, words over 50 characters will be cut with a line return:

$code = longwordbreak ($code, 50, ‘\n’);

Removing unwanted code:

If users paste in malicious scripts, ActiveX controls or other unwanted HTML elements this function allows you to strip them out.

Function name: remove_tags

Syntax: remove_tags (string html_code, array tags);

Parameters:

html_code: is the code sent from the form post that you want to process.
tags: An array where the key in each row is the tag you want removed and the value is a true false parameter that indicates whether to just remove the tag, leaving the contents of the tag intact, or to remove the tag and all code contained within the tag. True indicates that the tag and its contents should be removed, false will only remove the tag itself.

You can use this function to remove any HTML tags that you do not want used.

Example:
In the following example $code holds the code sent from the form post and the following tags will be removed: object, embed, applet and script.

$code = remove_tags ($code, array(
‘object’ => true,
‘embed’ => true,
‘applet’ => true,
‘script’ => true,
));

The function is case insensitive.

Example:
Using the two example scripts from earlier in this section, replace the code in ‘display.php’ with the following:

true,
‘embed’ => true,
‘applet’ => true,
‘script’ => true
));

echo $code;

?>

The script above now removes unwanted code before displaying the code. In an actual web application you would save this data to a database or file rather than displaying it. Please see the example application in the examples folder.

Tidying up your code

New in version 2.2.2. WysiwygPro includes some functions for cleaning up and improving the HTML code produced by the editor.

To use these functions first include ‘[installation directory]/editor_files/editor_functions.php’ in the script that will receive the code from the form post.

NOTE: these functions may not work with all character sets.

Fixing special characters

This function will encode all special characters such as © to © to meet XHTML requirements

Function name: fixcharacters

Syntax:

fixcharacters (string html_code);

Parameters:

html_code: is the code sent from the form post that you want to process.

Example:
In the following example $code holds the code sent from the form post.

$code = fixcharacters ($code);

NOTE: the results of this function will not be visible when viewing your code in WysiwygPro.

Encoding email addresses

This function will encode any email links within your code to make it difficult for spammers to scan your site for email addresses.

Function name: email_encode

Syntax:

email_encode (string html_code);

Parameters:

html_code: is the code sent from the form post that you want to process.

Example:
In the following example $code holds the code sent from the form post.

$code = email_encode ($code);

NOTE: you should call this function AFTER calling fixcharacters.

NOTE: the results of this function will not be visible when viewing your code in WysiwygPro.

Dealing with PHP tags or other non-html content

WysiwygPro will convert all tags not recognised by the browser into comments, this is not a flaw but a drawback of WysiwygPro’s HTML conversion engine that attempts to convert all code to valid XHTML 1.0 or HTML 4.01.

This means that if the document you are editing contains PHP tags or other server-side mark-up you will need to convert these tags back into PHP tags before saving the code.

WysiwygPro includes a function for performing this action. To use this function first include ‘[installation directory]/editor_files/editor_functions.php’ in the script that will receive the code from the form post.

Converting PHP tags back into PHP tags

Syntax: comm2php (string html_code);

Example:

$code = comm2php ($code);

Only comments that were originally PHP tags would be converted back into PHP. If you are editing in XHTML mode this function will also convert the XML declaration into a PHP echo statement to avoid a clash with PHP.

Note: in order for this function to work your PHP opening tags must be written as <?php not <?

Converting ASP tags back into ASP tags

Syntax: comm2asp (string html_code);

Example:

$code = comm2asp ($code);

Only comments that were originally ASP tags would be converted back into ASP.

Extending the editor

Adding a spell checker

One of the first things many people may want to add is a spell checker. WysiwygPro will work with any spell checker that is capable of spell checking a and that is capable of ignoring html code. This is because all the code generated by WysiwygPro is contained in a regular . This textarea is given the name you supplied when you called the set_name() PHP function, or if you did not call this function it is named htmlCode. You simply need to tell the spellchecker to spell check this textarea. But before you do you must update the textarea using JavaScript. Simply call this function: updateAllHTML(); or editorName.updateHTML()

After the spell check is complete you will need to update the WYSIWYG view with the spell checked html by calling updateAllWysiwyg(); or editorName.updateWysiwyg();

Note that you should only use spellcheckers that spell check s, spellcheckers that spell check iframe WYSIWYG editors such as WysiwygPro are also available, but these spellcheckers only work in Internet Explorer. WysiwygPro also works in Mozilla and Mozilla compatible browsers so this would be inappropriate.

If you want to add a spell check button to WysiwygPro’s toolbar you can use the addbutton() php function. See PHP API.

Note that an appropriate gif image for use as a spell check button is supplied in the images folder.

Connecting to an existing file management system.

If you are intending to use WysiwygPro to enhance an existing content management system you might want to replace the insert image and link to a document windows with files that connect to your own file management system. These files are called ‘image.php’ and ‘document.php’. If you need any help or advice please visit our support forum at http://www.wysiwygpro.com the WysiwygPro developers will check this forum regularly and try to answer any technical questions.

If you’re integrating WysiwygPro with MAMBO, upload the contents of the WP editor_files folder into the MOS editor folder and rename it to “wysiwygpro”. Also, set the “WYSIWYG Editor” parameter in the MOS global configuration to “wysiwygpro”

Frequently Asked Questions

The HTML is not updated when the form is submitted
You have forgotten to add onSubmit=”submit_form()” read the section on Embedding in a PHP script.

I see a message that says: Warning: Cannot add header information

You have forgotten to put at the top of your script. You also need to put at the end of your script. See the section on Embedding in a PHP script. If for any reason your server does not allow the use of output buffering you need to set NOCACHE to false in ‘config.php’.

The editor displays but the toolbar buttons appear as broken images

Check your WP_WEB_DIRECTORY setting in ‘config.php’ This should be the web address of your editor_files folder.

The image or document manager displays but images appear as broken images

Check your IMAGE_WEB_DIRECTORY setting in ‘config.php’ This should be the web address of your images folder eg: ‘/images/’ or ‘http://mywebsite.com/images/’. Similarly your DOCUMENT_WEB_DIRECTORY should be set to the web address of your downloadable documents folder.

How can I insert code into the editor so that I can edit an existing record

Use the set_code() php function. See set_code under PHP API

I want to locate my image folder under a different domain to the editor

You can do this so long as the images folder is on the same physical server. You might also need to check that your image.php script has permission to access your images folder.

In ‘config.php’ IMAGE_FILE_DIRECTORY should be set to the full file path to your images folder eg: ‘c:/web/mysite/htdocs/images/’. IMAGE_WEB_DIRECTORY should be the full web address for your images folder e.g. ‘http://www.mywebsite.com/images/’.

Do the same thing for DOCUMENT_FILE_DIRECTORY and DOCUMENT_WEB_DIRECTORY.

The code that I am editing will be placed under a different domain to the editor

Step one:
In config.php make sure that WP_WEB_DIRECTORY, IMAGE_WEB_DIRECTORY and DOCUMENT_WEB_DIRECTORY are set to full URLs. Also ensure that any links you add using set_links are also full URLs. By full URL we mean one that includes the protocol and domain name eg: http://www.mywebsite.com/folder/.

DOMAIN ADDRESS should be set to either ‘‘ or the domain under which your documents will reside.

Step two:
When you call the editor set base_url to the domain under which the document will reside eg: ‘http://www.mysite.com’ make sure there is no trailing slash on the end of this value. The baseurl function is explain in PHP API.

Step three:
If you also want your images folder located under a different domain See: I want to locate my image folder or downloadable documents folder under a different domain to the editor, how can I do this?
I want to set different image and document directories for different users
Use the set_img_dir and set_doc_dir functions.

I want to have more than one editor on the same page
See the section on Multiple Instances under PHP API.
I want to translate the editor to a different language
See the section on Multiple Languages under PHP API.

WysiwygPro 2.2.2 PHP Edition Developers Manual v1.0 Page PAGE 5

Have something to say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s