wysiwygPR0
PHP Edition Version 2.2.3
Developers Manual
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 1
Contents
Introduction ......................................................................................................................... 4
Package Contents ................................................................................................................. 5
Requirements ....................................................................................................................... 5
Upgrading From An Earlier Version ...................................................................................... 6
Installation .......................................................................................................................... 7
Embedding in a PHP script ................................................................................................... 8
PHP API ............................................................................................................................... 9
set_name ........................................................................................................................... 9
set_instance_lang ............................................................................................................. 10
subsequent ...................................................................................................................... 10
set_code .......................................................................................................................... 10
usexhtml .......................................................................................................................... 11
set_charset ...................................................................................................................... 11
set_doctype...................................................................................................................... 11
usep ................................................................................................................................ 11
set_baseurl ...................................................................................................................... 12
usefullurls ........................................................................................................................ 12
guidelines_visible .............................................................................................................. 12
set_stylesheet .................................................................................................................. 13
set_formatmenu ............................................................................................................... 13
set_classmenu .................................................................................................................. 13
set_fontmenu ................................................................................................................... 13
set_sizemenu ................................................................................................................... 14
removebuttons ................................................................................................................. 14
addbutton ........................................................................................................................ 15
addspacer ........................................................................................................................ 17
set_savebutton ................................................................................................................. 17
disableimgmngr ................................................................................................................ 18
set_inserts ....................................................................................................................... 18
set_color_swatches ........................................................................................................... 18
set_links .......................................................................................................................... 18
disablebookmarkmngr ....................................................................................................... 19
disablelinkmngr ................................................................................................................ 19
set_img_dir ...................................................................................................................... 19
set_doc_dir ...................................................................................................................... 20
Multiple Instances ............................................................................................................. 20
Multiple Languages ............................................................................................................ 21
Saving configurations and notes on file caching .................................................................... 22
JavaScript API .................................................................................................................... 24
Before you start! ............................................................................................................... 24
getCode ........................................................................................................................... 24
getPreviewCode ................................................................................................................ 25
getSelectedText ................................................................................................................ 26
setCode ........................................................................................................................... 26
insertAtSelection ............................................................................................................... 26
updateHTML ..................................................................................................................... 26
updateWysiwyg ................................................................................................................. 27
showDesign ...................................................................................................................... 27
showCode ........................................................................................................................ 27
showPreview .................................................................................................................... 27
updateAllHTML .................................................................................................................. 27
updateAllWysiwyg ............................................................................................................. 27
moveFocus ....................................................................................................................... 28
openDialog ....................................................................................................................... 28
Inserting code when the document loads ............................................................................. 29
Calling the file browsers from outside of WysiwygPro ............................................................. 29
Retrieving code from a form post ....................................................................................... 30
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 2
Dealing with malicious code ................................................................................................ 31
Tidying up your code ......................................................................................................... 32
Dealing with PHP tags or other non-html content .................................................................. 34
Extending the editor ........................................................................................................... 35
Adding a spell checker ....................................................................................................... 35
Connecting to an existing file management system. .............................................................. 35
Frequently Asked Questions ............................................................................................... 36
I see a number of Warning messages such as: ..................................................................... 36
I see an error message that says: Warning: Cannot add header information............................. 36
The editor displays but the toolbar buttons appear as broken images ...................................... 36
The image or document manager displays but images appear as broken images ....................... 36
The “Please Wait” message never goes away ........................................................................ 36
How can I insert code into the editor so that I can edit an existing record ................................ 37
I want to locate my image folder under a different domain to the editor ................................... 37
The code that I am editing will be placed under a different domain to the editor ....................... 37
I want to set different image and document directories for different users ................................ 37
I want to have more than one editor on the same page ......................................................... 37
I want to translate the editor to a different language ............................................................. 38
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 3
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.
EMOTICON COPYRIGHT NOTICE: The animated emoticons provided with WysiwygPro are included
under an agreement with the copyright holder, Bruce Corkhill and WebWizGuide.com. Purchasing a
WysiwygPro license allows you to use the animated emoticons ONLY as part of the WysiwygPro editor
component. Emoticons may not be used, copied or redistributed outside of the WysiwygPro product,
without explicit permission from Bruce Corkhill.
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 <textarea> 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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 4
Package Contents
Editor_files
This folder contains the WysiwygPro application. Copy this folder to your web server. See the
installation section for further instructions.
Examples
Contains example scripts that demonstrate how to use WysiwygPro in you own web applications. You
may copy or use these examples in any way you wish.
Pop_Up_Editor
This example demonstrates a simple method for editing textareas in non-PHP documents.
Pop_Up_File_Manager
This example demonstrates how to use the Image and Document managers outside of
WysiwygPro.
Simple_File_Editor
This example demonstrates how to create an application that uses WysiwygPro to edit HTML
documents on your server.
Goodies
Contains optional extras.
Requirements
Supported browsers:*
Windows (all)
Internet Explorer 5.0+
Netscape 7.1+
Mozilla 1.4+
Firefox 0.7+
Or any browser based on
Mozilla 1.4+
OS 8.6 and 9.x
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)
Mac OS X/Linux/Unix
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.
Server Requirements:
PHP 4.1.0 or newer
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 5
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 – 2.1
Simply install the new product over your old installation. Note that the configuration file may be
significantly different to your current version. You will need to set up the new configuration file.
JavaScript API is also significantly different. You will need to check any JavaScript that you are using
to communicate with your editor. See the section on JavaScript API.
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.
 Versions prior to 2.2 would generate HTML mark-up in IE, but in Mozilla they would generate
inline styles. This meant that IE could not edit formatting done in Mozilla and vice-versa. As of
2.2 the editor produces the same HTML mark-up 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!
 You no-longer need to use onsubmit=”submit_form()” and should remove it from all your
form tags.
 If using multiple instances you no-longer need to use the subsequent function. This function
will be called automatically for you.
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)
 The same behaviour when you press enter in both Mozilla browsers and IE. (2.2.2)
 guidlines_visible method allows you to set whether guidelines are on or off by default (2.2.2)
 fixcharacters function allows you to encode special characters (2.2.2)
 email_encode function allows you to hex encode email links (2.2.2)
 comm2asp function allows you to convert ASP code back into ASP code (2.2.2)
 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)
 Context menus in Mozilla/Netscape/Firefox (2.2.3)
 New set_charset function allows you to specify the charset of your document. Use this when
editing a document fragment. (2.2.3)
 New set_doctype function allows you to override the default document type declarations.
(2.2.3)
 You no-longer need to add onSubmit=”submit_form()” to your form tag. (2.2.3)
 New SMILEY_FILE_DIRECTORY and SMILEY_WEB_DIRECTORY constants in config.php allow
you to specify your own directory of emoticon smilies. (2.2.3)
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 6
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.
This usually means setting your directory permissions to 757. You should be able to do this using
almost any 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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 7
Embedding in a PHP script
Create a PHP file and put the following code in it:
(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.)
<?php ob_start(); ?>
<html>
<head>
<title>My Editor</title>
</head>
<body>
<form name="wysiwygproForm" method="post" action="">
<?php
// include the config file and editor class:
include_once (‘editor_files/config.php’);
include_once (‘editor_files/editor_class.php’);
// create a new instance of the wysiwygPro class:
$editor = new wysiwygPro();
// print the editor to the browser:
$editor->print_editor(700, 400);
?>
</form>
</body>
</html>
<?php ob_end_flush(); ?>
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.
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 680x390. 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);
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 8
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:
<form name="wysiwygproForm" method="post" action="">
<?php
// include the config file and editor class
include_once (‘editor_files/config.php’);
include_once (‘editor_files/editor_class.php’);
// create a new instance of the wysiwygPro class
$editor = new wysiwygPro();
// insert some HTML
$editor->set_code(‘<p>This is the HTML code I want to edit<p>‘);
// print the editor to the browser
$editor->print_editor(700, 400);
?>
</form>
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 <textarea> tag with WysiwygPro use set_name to give WysiwygPro the same
name as the <textarea> you are replacing.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 9
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.
NOTE: certain names can cause the editor to fail. The following names have been reported to cause
problems: “body”, “description”, “head” or any name that does not match A-Za-z0-9_
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.
NOTE: as of version 2.2.3 this function will be called automatically if your script contains
more than one editor, therefore you no-longer need to use this function.
If for any reason you need to disable this new behaviour set a global scope variable called
$wp_has_been_previous to false before calling print_editor().
Example:
$wp_has_been_previous = false;
$editor->print_editor();
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
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 10
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 charset, string lang]);
The first parameter is true or false. It should always be true.
The second parameter is the charset that the editor should use for the XML declaration, this will
affect the way the editor renders your HTML code so be sure to set this correctly. The default is “ISO8859-1”.
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
set_charset
Sets the charset used to create and render HTML code.
Syntax: $editor->set_charset(string charset);
This function is intended for when you are editing a fragment of HTML code but need to use a
particular charset for the code to render properly.
If you are editing a complete HTML document DO NOT use this function, rather you should place your
charset in a meta tag at the head of your document.
set_doctype
Sets the doctype used to create and render HTML code.
Syntax: $editor->set_doctype(string doctype);
If you are
instead of
If you are
still affect
editing a complete HTML document the doctype will be added to the top of your code
the default doctype used by the editor.
editing a fragment of HTML code the doctype will not appear in the source code but it may
rendering of code in both the preview and WYSIWYG views.
Be sure to call this function after calling usexhtml otherwise the doctype may be overridden by the
editor’s default XHTML doctype.
usep
Syntax: $editor->usep(true);
Tells the editor to use <p> on enter rather than the default <div>
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 11
Using the default <div> tags creates single line returns on enter key press which results in an editing
experience similar to Word.
Using <p> 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 <br> tag by pressing shift+enter.
The default <div> mode is recommended for editing emails or other media where you cannot rely on
a stylesheet. On a website we recommend that you set usep and set the margin property for P tags
to 0, that way you will get a well structured document and still have an editing experience similar to
word.
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 <base
href=”http://www.site.com/some/location/”> 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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 12
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 url_of_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 URL of your 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 <head> 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);
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 13
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, sansserif; 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
toolbar1
toolbar2
tab
html
preview
print
find
spacer1
pasteword
spacer2
undo
redo
spacer3
Description
Removes the entire top toolbar
Removes the entire bottom toolbar
Removes all tabs from the bottom of the editor
Removes just the HTML Source tab
Removes just the preview tab
The first spacer on the toolbar
The button for pasting cleaned html from Word
The second spacer on the toolbar.
The third spacer on the toolbar.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 14
tbl
edittable
spacer4
border
image
smiley
ruler
link
document
bookmark
special
custom
format
font
size
class
spacer5
bold
italic
underline
spacer6
left
center
right
full
spacer7
ol
ul
indent
outdent
spacer8
color
highlight
All table insertion and editing buttons
Table editing buttons.
The fourth spacer on the toolbar.
Show/Hide guidelines button
Insert an image
Insert and Emoticon smiley
Insert a horizontal rule
Create/Edit a hyperlink
Link to a downloadable document
The button for inserting a bookmark (named anchor)
Insert a special character
Insert a custom site object
The format list dropdown
The font menu
The font size menu
The customisable class menu
The fifth spacer on the toolbar.
Bold text
Italic text
Underline text
The sixth spacer on the toolbar.
Justify left
Justify center
Justify right
Justify full
The seventh spacer on the toolbar.
Ordered (numbered) list
Unordered list
Indent
Outdent
The eighth spacer on the toolbar.
Font color
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 15
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.a
sp
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);
To add a new button before the print button:
$editor->addbutton(‘My New Button’,
‘/images/button.gif’, 22, 22);
‘before:print’, ‘myFunction()’,
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:
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 16
$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’);
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 17
To display a custom button:
$editor->set_savebutton(‘Submit’, ‘http://www.mysite.com/images/submit.gif’, 22, 22):
Remember this is optional, you can submit the form with a regular input button the same way you
might submit any other HTML form.
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 readymade 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’ => ‘<img src=”logo.gif”>‘,
‘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);
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 18
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 19
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!
Example:
The following script will generate a page with three editors on it:
<?php ob_start(); ?>
<html>
<head>
<title>My Editors</title>
</head>
<body>
<form name="wysiwygproForm" method="post" action="">
<?php
// include the config file and editor class:
include_once (‘editor_files/config.php’);
include_once (‘editor_files/editor_class.php’);
// Editor one ----------------------------------// create a new instance of the wysiwygPro class:
$editor = new wysiwygPro();
//give the editor a unique name:
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 20
$editor->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’);
// 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’);
// print the editor to the browser:
$editor3->print_editor(700, 400);
?>
</form>
</body>
</html>
<?php ob_end_flush(); ?>
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 21
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:
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 22
// create a new instance of the wysiwygPro class
$editor = new wysiwygPro(‘my_configuration’);
// insert some HTML
$editor->set_code(‘<p>This is the HTML code I want to edit<p>‘);
if ($editor->has_expired) {
// do database queries and other configuration functions here
}
// print the editor to the browser
$editor->print_editor(700, 400);
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 23
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 24
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:
<?php ob_start (); ?>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language=”JavaScript”>
<!--//
function doPreview() {
var code = myEditor.getPreviewCode();
var preWin = window.open(‘‘, ‘preWin’, ‘width=400,height=300’);
preWin.document.open();
preWin.document.write(code);
preWin.document.close();
preWin.focus();
}
//-->
</script>
</head>
<body>
<form name="wysiwygproForm" method="post" action="">
<?php
include_once (‘editor_files/config.php’);
include_once (‘editor_files/editor_class.php’);
$editor = new wysiwygPro();
$editor->set_name(‘myEditor’);
$editor->set_code(‘<p>This is the HTML code I want to edit<p>‘);
$editor->print_editor(700, 400);
?>
<input type="button" name="Preview" value="Preview" onClick="doPreview()">
</form>
</body>
</html>
<?php ob_end_flush (); ?>
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 25
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 26
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.
updateAllHTML
Syntax: updateAllHTML()
No parameters are required.
This will update the textareas for all editors on the page. (Each editor stores the html code you are
editing in a regular <textarea>)
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 27
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:
<script language="JavaScript" src="/editor_files/js/dialogShared.js"></script>
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’)
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 28
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:
<script language="JavaScript">
document.getElementById(‘myEditor’).value = ‘The code I want to insert’;
</script>
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 29
Retrieving code from a form post
Make sure that WysiwygPro is placed within a form.
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:
<?php ob_start(); ?>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name="Form" method="post" action="display.php">
<?php
include_once (‘editor_files/config.php’);
include_once (‘editor_files/editor_class.php’);
$editor = new wysiwygPro();
$editor->set_name(‘myEditorCode’);
$editor->print_editor(700, 400);
?>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
<?php ob_end_flush(); ?>
Create a second PHP script and call it ‘display.php’ and put the following in it:
<?php
echo stripslashes($_POST[‘myEditorCode’]);
?>
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 30
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 31
$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:
<?php
$code = stripslashes($_POST[‘htmlCode’]);
// break apart excessively long words
$code = longwordbreak ($code, 40, ‘ ‘);
// remove unwanted tags
$code = remove_tags ($code, array(
‘object’ => 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
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.
Fixing special characters
This function will encode all special characters such as © to &copy; to meet XHTML requirements
Function name: fixcharacters
Syntax:
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 32
fixcharacters (string html_code [, charset]);
Parameters:
html_code: is the code sent from the form post that you want to process.
Charset: if you supply this optional parameter your code will be encoded to this charset.
Only the following values are supported for the charset parameter:
Charset
Aliases
Description
ISO-8859-1 ISO8859-1
Western European, Latin-1
ISO-885915
Western European, Latin-9. Adds the Euro sign, French and Finnish letters
missing in Latin-1(ISO-8859-1).
ISO8859-15
UTF-8
ASCII compatible multi-byte 8-bit Unicode.
cp866
ibm866, 866
DOS-specific Cyrillic charset. This charset is supported in PHP 4.3.2.
cp1251
Windows-1251, win1251, 1251
Windows-specific Cyrillic charset. This charset is supported in 4.3.2.
cp1252
Windows-1252, 1252
Windows specific charset for Western European.
KOI8-R
koi8-ru, koi8r
Russian. This charset is supported in 4.3.2.
BIG5
950
Traditional Chinese, mainly used in Taiwan.
GB2312
936
Simplified Chinese, national standard character set.
BIG5HKSCS
Big5 with Hong Kong extensions, Traditional Chinese.
Shift_JIS
SJIS, 932
Japanese
EUC-JP
EUCJP
Japanese
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 33
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 34
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 <textarea> and that is capable of ignoring html
code. This is because all the code generated by WysiwygPro is contained in a regular <textarea>.
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 <textarea>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”
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 35
Frequently Asked Questions
I see a number of Warning messages such as:
Warning: Division by zero in c:\folder\editor \index.php on line 15
Warning: Failed opening 'php’' for inclusion (include_path='.;C:\php\includes') in
c:\folder\editor \index.php on line 15
Warning: Division by zero in c:\folder\editor\index.php on line 16
Warning: Failed opening 'php’' for inclusion (include_path='.;C:\php\includes') in
c:\folder\editor \index.php on line 16
Fatal error: Cannot instantiate non-existent class: wysiwygpro in c:\folder\editor
\index.php on line 20
If you pasted example code from this manual please check that all single and double quotes are
straight not angled or curly. Due to the nature of Word documents the example code in this manual
features curly quotes where there should be straight quotes.
I see an error message that says: Warning: Cannot add header information
You have forgotten to put <?php ob_start(); ?> at the top of your script. You also need to put
<?php ob_end_flush(); ?> 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.
The “Please Wait” message never goes away
This could be caused by a number of things so check each of the items below:
1. In config.php check that your WP_WEB_DIRECTORY setting:
 Is set absolute from the server root e.g “/editor_files/” NOT
“http://www.mysite.com/editor_files/”
 Ends in a “/”
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 36
 Is the correct address of the editor_files folder.
2. If you have used the set_name function check that you have not set this to an illegal name. See
set_name under PHP API for more.
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.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 37
I want to translate the editor to a different language
See the section on Multiple Languages under PHP API.
WysiwygPro 2.2.3 PHP Edition Developers Manual v1.0
Page 38