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
|