Customizable Toolbar Layouts

< Back to demos

Customizable toolbar layouts
You can create any number of toolbars and place any buttons you like on them and in any order you like, plus you can create your own custom buttons, drop-down menus and select list boxes. This demo shows a simple custom toolbar layout.

<h2>Welcome to the WysiwygPro Demos!</h2>
With WysiwygPro &nbsp;you
can create bold italic or underlined text at
the click of&nbsp;a button. You can color text, highlight text create <a href="{site_url}/index.asp" target="_self">hyperlinks</a>, change the font, insert images,&nbsp;create
tables, lists and more. There is no need to know anything about HTML; WysiwygPro will&nbsp;generate all the HTML for you. Click the Source tag to
see the HTML code that WysiwygPro has generated.
Some handy editing tips: 
<ul>
 <li>To bring up the browser default context menu hold down the Alt key while opening the menu. </li>
 <li>To enter a single line-return instead of a paragraph return hold down the shift key and press enter. </li>
</ul>
<img alt="" title="" src="/assets/images/miniBanner.gif" align="default" height="98" width="627" />
WysiwygPro is ideal for use as the editing interface for a content management
system, webmail system or discussion forum.
If you are a developer and you want to restrict what a user
can do, you can disable any of WysiwygPro's&nbsp;editing&nbsp;features
as well as create a drop-down menu of pre-defined styles. Please check
out the other demos for examples.
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. 
The editor is infinitely customizable through a powerful plug in architecture and all source code is provided.
Purchase with confidence, we offer a money back guarantee!

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 http://www.wysiwygpro.com/browsers/

Source code:

<?php include_once('wysiwygPro/wysiwygPro.class.php'); // create a new WysiwygPro instance $editor = new wysiwygPro(); // load the base configuration $editor->loadPlugin('demoConfig'); // give the editor a name $editor->name = 'demo'; // remove the default toolbar layout $editor->clearToolbarLayout(); // add a new toolbar $editor->addToolbar('toolbar1', array('styles','separator','bold','italic','underline','superscript','subscript','strikethrough', 'separator','image','link')); // display the editor $editor->display(700, 400); ?>

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.2.1