Table of Contents
- Formatting
- Video Tutorials
- Developer Guide
Formatting
- Text Formatting (font, size, color, effects, spacing, etc)
Complete with a preview. Apply to selected text or html tags.
- Paragraph Formatting (indentation, word spacing, line height, etc)
Complete with a preview. Apply to selected paragraph.
- List Formatting (numbered list & bulleted list)
You can also create a list with a custom image (bullet).
- Box Formatting
Applies border & shading, margin, padding, width & height to tables,
cells, images, and almost any HTML elements (DIVs, SPANs, etc).
- Apply <span> tag instead of <font> tag.
Avarage Editors use this: |
InnovaStudio WYSIWYG Editor uses: |
<font
style="FONT-SIZE: 10pt; FONT-FAMILY:
verdana,arial,sans-serif">Hello
World!</font> |
<span
style="FONT-SIZE: 10pt; FONT-FAMILY:
Verdana, Arial, sans-serif">Hello
World!</span> |
- Dropdowns with Formatting Preview (does not generate undo/redo
problem)
Including Paragraph dropdown, Font dropdown & Font Size dropdown.
Instead of using an ordinary dropdown: |
InnovaStudio WYSIWYG Editor uses: |
 |
 |
It is a common DHTML issue that operations which require dynamic settings
could clear the undo list. Our formatting dropdowns will not cause this
problem.
- Insert style-driven tables
You will not find this ordinary table: |
You will get: |
OR:
|
And it's easy to format the tables:
|
- Quick & Advanced Table Insert
You can easily create tables using a quick dropdown or advanced table
insert dialog.
- Full control over individual cells in a table, complete
with a preview area
- Easy bookmark management
You can insert/update bookmarks, and go to/select bookmarks with ease.
- Quick Color Selection & Advanced Color Picker
The Advanced Color Picker has prebuilt web color pallete, HTML colors
& a composition of 216 web-safe colors which are constructed in a smooth
transition between each color. This will help users to find a wide selection
of effective color combinations. Other features include: hex & rgb input/preview,
and the ability to specify custom colors.
- Apply pre-defined styles to any text or HTML elements
- Apply external css file to the Editor
It will format the Editor content and the style classes can be selected
from the "Styles Seletion".
- Insert Web Assets in the form of objects or hyperlinks
If you enable the Asset Manager add-on, a browse button
will appear in the "Hyperlink" dialog, "Image" dialog, "Insert Flash"
dialog & "Insert Media" dialog. It will open the Asset Manager add-on
dialog so you can select a file (image, flash animation, video, etc.)
to insert into the Editor.
- Asset Manager Add-On
The Assets Manager add-on allows you to browse & manage your web assets
(upload and delete files, create and delete folders).
- Easily Create Forms and Insert/Update Form fields
You can Insert/Update Forms, Textboxes, Textareas, Password Inputs,
Lists, Dropdowns, Checkboxes, Radio Buttons, Hidden Fields, File Fields,
Buttons, and Submit/Reset Buttons.
- Easy to select any HTML elements (text, paragraph, images, etc)
with a built-in Tag Selector
After selecting a HTML element you can then apply formatting, remove
its styles, or even delete the element.
- Fullscreen editing mode
It does not open a new window, instead it will resize to fit the browser
screen.
- Insert pre-defined Custom Tags
Custom tags are commonly used in many mailing systems, where they will
be replaced with user information to construct personalized email content.
Custom tags are also useful in template creation in web content management
systems.
- Handling Relative paths issue
It is a common problem in browser-based Editing that relative paths
are always converted to absolute after viewing the content/HTML source.
This problem is now solved with InnovaStudio WYSIWYG Editor. The Editor
will keep the relative path as it is.
- Insert Custom HTML
This feature allows you to insert your custom prepared content (eg.
Company Logo, Signature, or any commonly used content). It has an advantage
that all inserted images which have relative paths will be kept as it
is (the relative paths will not be converted to absolute).
- Insert Custom Link
This feature allows you to insert your custom links for example: internal
links or links to pages on your server. The Editor has an "Internal
Link" button which can be enabled to open your custom link lookup page.
- Preview Window
See how your content is displayed in a browser using a Preview Window.
Preview window is resizable.
- Preview/Edit HTML Source with code formatting & coloring
You can preview/edit HTML Source with code formatting & coloring. If
opened in IE5.5++, the Source Editor will also locate the cursor/selection
based on the current selected tag in the WYSIWYG view (many competing
products will usually locate the cursor at the very beginning of the
text).
Note that you can easily configure whether you'd like to edit full HTML
source or BODY section only.
- Flexible placement of the Editor scripts
The Editor scripts can be placed & used anywhere in your web folders.
- Fully configurable toolbar buttons & dropdowns
You can show/hide the Editor buttons & dropdowns, re-arrange them, apply
button spaces and apply toolbar line breaks (no external configuration
file required). This provides greater flexibility and control to meet
the clients requirements.
- Realtime toolbar status
The Editor buttons will enabled/disabled based on the current selection.
WYSIWYG Video Tutorial Library
Using the WYSIWYG Editor is fairly intuitive, but if you have difficulties
these Video Tutorials should help. You can download the entire Library
to review at your leisure, or just the topics that are relevant to you.
EditorVideoTutorials - Entire Library:
EditorVideoTutorials.zip
Individual Topics
- Standard
Formatting
- Color
Preferences
- Formatting
Text
- Formatting
Paragraphs
- Formatting
Lists
- Formatting
Boxes
- Hyperlinks
and Bookmarks
- Adding
Images
- Adding
Flash Files
- Adding
Video Files
- Inserting
Forms
- Inserting
Tables
- Re-sizing
Tables
- Table
Autofit
- Changing
Table Properties
- Cell
Autofit
- Changing
Cell Properties
- Using
Search and Replace
- Full
Screen View
- Using
the Tag Selector
- Index
Top |