» WYSIWYG User Guide
Close » 

Table of Contents

  1. Formatting
  2. Video Tutorials
  3. Developer Guide


  • 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: 
    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:



Individual Topics

  1. Standard Formatting
  2. Color Preferences
  3. Formatting Text
  4. Formatting Paragraphs
  5. Formatting Lists
  6. Formatting Boxes
  7. Hyperlinks and Bookmarks
  8. Adding Images
  9. Adding Flash Files
  10. Adding Video Files
  11. Inserting Forms
  12. Inserting Tables
  13. Re-sizing Tables
  14. Table Autofit
  15. Changing Table Properties
  16. Cell Autofit
  17. Changing Cell Properties
  18. Using Search and Replace
  19. Full Screen View
  20. Using the Tag Selector
  21. Index