Controlled style demo

Have you got users who like to create fluro yellow tables with bright pink text? Reign them in with WysiwygPro 3! In this demo we have created pre-defined styles that can be use to format the document, but we have gone one step further and disabled all other features so that you have no choice but to use the styles we have created!

To enable WYSIWYG editing you must be using a supported browser, however you may still edit the raw HTML code in the above textarea. For a full list of supported browsers please see

Integration Code:

// create a new WysiwygPro Instance
$editor = new wysiwygPro();

// load base configuration

// give the editor a name
$editor->name 'demo';

// set the theme
$editor->theme 'blue';

// set the HTML code to be edited
$editor->value '<p><strong>Wysiwyg<em>Pro</em></strong> is ideal for use as the editing interface for a content management
system, webmail system or discussion forum.</p>
<p>If you are a developer and you want to restrict what a user
can do, you can disable any of <strong>Wysiwyg<em>Pro</em>\'s</strong> editing features
as well as create a drop-down menu of pre-defined styles. Please check
out the other demos for examples.</p>
<p>Most of these demos use XHTML 1.0 Transitional, but WysiwygPro can also be configured to generate HTML 4 Transitional or Strict, XHTML 1.0 or XHTML 1.1. When editing a strict document type WysiwygPro will generate inline styles instead of using depreciated tags and attributes. </p>
<p>The editor is infinitely customizable through a powerful plug in architecture and all source code is provided.</p>
<p>Purchase with confidence, we offer a money back guarantee!</p>'
// disable unwanted features

// load a stylesheet

// load style definitions
$editor->addStyle('*block* class="green"''Green');
$editor->addStyle('span class="highlight"''Highlight');
$editor->addStyle('table class="table1" cellspacing="0" cellpadding="0"''Table style 1');
$editor->addStyle('table class="table2" cellspacing="0" cellpadding="0"''Table style 2');
$editor->addStyle('hr class="hr1"''Ruler Style 1');
$editor->addStyle('hr class="hr2"''Ruler Style 2');
$editor->addStyle('ol class="ol1"''List style 1');
$editor->addStyle('ol class="ol2"''List style 2');
$editor->addStyle('ul class="ol3"''List style 3');
$editor->addStyle('img class="object1"''Image floated left');
$editor->addStyle('img class="object2"''Image floated right');

// display the editor


We are using a plugin "demoConfig" to apply shared configuration settings such as the file manager configuration.

See the source code for this plugin.

WysiwygPro version 3.3.2