For setup instructions please view quick_setup.txt
All examples must be put into PHP pages and have a .php extension.
This is the simpliest usage of the control with all the default parameters
<form name="NameOfFormHere" method="post" action="submitpage.php">
<?PHP // Full path to the visualEdit script $visEdit_root = 'http://www.yourdomain.com/visEdit/';
include $visEdit_root.'visEdit_control.class.php'; $sw = new visEdit_Wysiwyg('visEdit1',stripslashes($HTTP_POST_VARS['visEdit1'])); $sw->show();
?>
<input type="submit" name="Submit" value="Submit">
</form> With the above the content box will will pass the content of the form with the variable visEdit1.
It will also have preset content into the editor that is contained in the variable visEdit1 if any.
$sw = new visEdit_Wysiwyg('visEdit1',stripslashes($HTTP_POST_VARS['visEdit1']));
The bold above is the content box variable that the form will pass to the new page.
$sw = new visEdit_Wysiwyg('visEdit1',stripslashes($HTTP_POST_VARS['visEdit1']));
The bold above is the variable name that will be pre-inserted into the editor when the form page is loaded. <form name="NameOfFormHere" method="post" action="submitpage.php">
The above line should be modified to insert the form name of your choice (change NameOfFormHere)
along with the page that the form will point to (replace submitpage.php with the name of the page you wish the form to point to)
Now let's try something else... let's specify width and height of the control, Lithuanian language and different toolbar mode (sidetable in this example).
<form name="NameOfFormHere" method="post" action="submitpage.php">
<?PHP // Full path to the visualEdit script $visEdit_root = 'http://www.yourdomain.com/visEdit/';
$sw = new visEdit_Wysiwyg('visEdit2' /*name*/,stripslashes($HTTP_POST_VARS['visEdit2']) /*value*/, 'lt' /*language*/, 'sidetable' /*toolbar mode*/, 'default' /*theme*/, '550px' /*width*/, '350px' /*height*/); $sw->show();
?>
<input type="submit" name="Submit" value="Submit">
</form>
In this example we pass an url (demo_red.css) of the stylesheet file to the consturctor
<form name="NameOfFormHere" method="post" action="submitpage.php">
<?PHP // Full path to the visualEdit script $visEdit_root = 'http://www.yourdomain.com/visEdit/';
$sw = new visEdit_Wysiwyg('visEdit5' /*name*/,stripslashes($HTTP_POST_VARS['visEdit5']) /*value*/, 'en' /*language*/, 'mini' /*toolbar mode*/, '' /*theme*/, '250px' /*width*/, '90px' /*height*/, 'demo_red.css' /*stylesheet file*/); $sw->show();
?>
<input type="submit" name="Submit" value="Submit">
</form>
There is a way to customize the content of the dropdowns like styles, fonts, etc. You can customize it for all instances of the control by modifying $visEdit_dropdown_data array in config file or in the script. Or you can specify specific data for dropdowns for each of the separate instances. This example shows how...
<form name="NameOfFormHere" method="post" action="submitpage.php">
<?PHP
// Full path to the visualEdit script $visEdit_root = 'http://www.yourdomain.com/visEdit/';
// make a copy of $visEdit_dropdown_data array $demo_array = $visEdit_dropdown_data; // unset current styles unset($demo_array['style']); // set new styles $demo_array['style']['default'] = 'Default'; $demo_array['style']['crazystyle1'] = 'Crazy style no. 1'; $demo_array['style']['crazystyle2'] = 'Crazy style no. 2'; $demo_array['style']['crazystyle3'] = 'Crazy style no. 3'; // pass $demo_array to the constructor $sw = new visEdit_Wysiwyg('visEdit6' /*name*/,stripslashes($HTTP_POST_VARS['visEdit6']) /*value*/, 'en' /*language*/, 'default' /*toolbar mode*/, '' /*theme*/, '550px' /*width*/, '90px' /*height*/, '' /*stylesheet file*/, $demo_array /*dropdown data*/); $sw->show();
?>
<input type="submit" name="Submit" value="Submit">
</form>
Using visEdit Editor is pretty simple and straight-forward:
So as you can see it is indeed pretty simple. The main factor affecting the look and feel of the control is what you pass to the contstructor. Those who like learning by example should now switch to the source code and output of demo.php script in scripts directory.
The full interface of visEdit_Wysiwyg contructor is:
visEdit_Wysiwyg(
$control_name='visEditeditor', // control's name
$value='', // initial value
$lang='', // language
$mode = '', // toolbar mode
$theme='', // theme (skin)
$width='100%', // width
$height='300px', // height
$css_stylesheet='', // css stylesheet file for content
$dropdown_data='' // data for dropdowns (style, font, etc.)
)
Parameters:
$control_name - the name of the control. This will be used for the id of the field holding the contents of the control and you will use it to obtain the contents when submitted to the server (i.e. $HTTP_POST_VARS['visEditeditor']). The default value is "visEdit_editor". Don't forget to set this parameter to different values if using more than one instance of the control on one page.
$value - initial content of the control. This is what you want to be in the editable area when control loads. Use something like stripslashes($HTTP_POST_VARS['visEditeditor']) if you want control to display what was typed prior to submitting.
$lang - this denotes the language to be used in the control's interface. The default is the value of $visEdit_default_lang variable set in config file which by default is equal to "en" (English). If you specify a value other than set in $visEdit_default_lang variable, the control loads language data for default language as a "backup". This is done so in case the translation is a little outdated control is still usable (i.e. you will get messages in default language (most likely English) instead of missing translations from your selected language files. Available languages can be determined by taking a look at lib/lang/ subdirectory. Names of the subdirectories in there are the valid values for the $lang parameter.
$mode - toolbar mode (layout). Toolbar mode specifies the toolbar layout to be used for the instance. It defaults to the value of $visEdit_default_toolbars config variable. You can also think of it as a way to limit (or extend) the features available to the user (this is why it was called mode). Valid values are the names of subdirectories in lib/toolbars/ directory.
$theme - the skin (look) of the control. This affects the images and rollover effects used for toolbar buttons and controls css styles. The default is the value of $visEdit_default_theme config variable. Valid values are the names of subdirectories in lib/themes/ directory.
$width - control's width. The default is 100%.
$height - control's height. The default is 300 pixels.
$css_stylesheet - CSS stylesheet file to be used for control's content. The default is the value of $visEdit_default_css_stylesheet config variable.
$dropdown_data - the array holding values to be used in a
dropdown type toolbar controls like style, font, fontsize and paragraph. The
structure is $dropdown_data['control_name']['value'] = 'Text'.
The default data is taken from $visEdit_default_dropdown_data
config variable. You may use it as a starting point when customizing the dropdown
data. You will most likely want to customize the data for the "style" dropdown
cause it's the most instance specific of all dropdowns. Don't forget to provide
the style with value "default". This one is used to remove the class attribute.
All of the visEdit Editor configuration options are located in the config/visEdit_control.config.php file.
Now let's take a look at the configuration options available in the config file:
$visEdit_dir - directory where visEdit files are located. Set this to a virtual directory value relative from the root of your website
$visEdit_base_url - this is used as a base url for images inserted through image library. It was introduced for cases when you access your admin area via different hostname than the one used by visitors. Set this to your web hosts root including the trailing slash (i.e. http://www.mycompany.com/).
$visEdit_root - this is the physical directory where visEdit control resides. This is calculated automatically and you don't need to explicitly set this if only in some very rare cases.
$visEdit_default_toolbars - default toolbar mode to be used if no toolbar mode specified. Valid values are the names of subdirectories in lib/toolbars/ directory.
$visEdit_default_theme - default theme (skin) to be used if no theme specified. Valid values are the names of subdirectories in lib/themes/ directory.
$visEdit_default_lang - default language to be used if no language is specified. This is also used as a backup if selected language file has no translation for specific phrase. For this reason we suggest that, even if you always use the control in Italian, you leave it as 'en' because English language file will always be up-to-date and other language files may lack latest additions in the upcoming versions. Names of the subdirectories in there are the valid values for the $lang parameter.
$visEdit_default_css_stylesheet - default stylesheet file to be used for the control's content. Set this to the virtual path to the css file.
$visEdit_inline_js - if set to true forces visEdit to output functional javascript inline the including page. Otherwise script is included as external file via src attribute of script tag.
$visEdit_active_toolbar - if set to true enables "active toolbar" feature. If you plan that editor will be used by users on slow computers you better set this to false.
$visEdit_dropdown_data - array holding values and texts for the toolbar items of dropdown type like style, font, fontsize and paragraph in the following format: $visEdit_dropdown_data['control_name']['value'] = 'text';.
Following settings apply to image library dialog only
$visEdit_valid_imgs - file extensions allowed for uploaded images.
$visEdit_upload_allowed - if set to true users will be allowed to upload images in image library. Otherwise upload functionality is disabled.
$visEdit_imglibs - array of arrays describing image libraries (directories), each array consists of 'value' element holding the path to the directory from the root without starting slash and 'text' element is a description visible to user.