WYSIWYG Editing Using Wyzz
Adding Wyzz to your web pages is very simple, requiring only two steps.
1. Include the Wyzz script in the head of your page
2. Add a 1-line script after the textarea field to be converted. Simply add the following line between script tags:
make_wyzz('id')
where id is the ID of the textarea in question.
An optional third step is the modification of Wyzz to suit your needs. In particular, it is very simple to include and exclude functions from the list below, and to change the order in which they appear on the toolbar.
And that's it! Full instructions are in the download, but it really is pretty easy.
You can even add WYSIWYG editors to a number of different textarea elements on your page, simply by giving them unique IDs and carrying out step 2 above for each textarea you want converted to a Wyzz editor.
What Can Wyzz Do?
Wyzz has the following facilities available:
Bold text - toggle the highlighted text in and out of bold type
Italic Text - toggle the highlighted text in and out of italic typeface
Underline - toggle underline for sleected text
Format - Format the highlighted text left, right or center
Unordered list - make the selected text into a bulleted list
Ordered List - make the selected text into a numbered list
Increase Font Size - make highlighted text one size larger
Decrease Font Size - make highlighted text one size smaller
From v0.2 onwards:
Strikethrough the selected text
Undo the last operation
Redo something you've undone
Indent a block of text (move it to the right)
Outdent (move left) a block of text
Subscript - smaller, lowered characters
Superscript - smaller, raised characters
From v0.31:
Background Color - change the color behind the selected text
Foreground Color - change the text color
From v0.4
HTML Source Edit - switch the editor between HTML and Source Code views - and edit in either
Cut - cut content to your clipboard
Copy - copy content to clipboard
Paste - paste contents from clipboard into editor
Hyperlink - insert a hyperlink into the content
Insert Image into the content
Help - Information about Wyzz
From v0.41
Full Justify - justify text block to both left and right margins
From v0.5
Font Face Selector - Select your desired font from a definable list
Horizontal Rule - place one anywhere in your text
Remove Formatting - clear previously-added HTML formatting
From v0.51
Character Map - insert special characters from a configurable list
HTML Headings - H1, H2 .... H6
Multiple toolbars - define either one or two toolbars for your application
From v0.55
Style the edit area using an external CSS stylesheet
From v0.6
P and PRE tags added to the Headers menu. P wraps the text in normal
tags (the default container for text in Wyzz) while PRE wraps text in
tags, allowing you to (for example) display source code or other pre-formatted content.Configurable to output XHTML 1.0 compliant code.