Default Example | More Examples | Documentation | ASP.NET Documentation

Documentation

Usage

1. Register the Editor Control in your ASP.NET page.

        <%@ Register TagPrefix="editor" Assembly="WYSIWYGEditor" namespace="InnovaStudio" %>

2. Embed the control.

        <editor:wysiwygeditor ID="oEdit1" scriptPath="scripts/" Runat="server" />

3. Configure the Editor.

        'Editor Dimension
        oEdit1.Width = 850
        oEdit1.Height = 350

        'Toolbar Buttons Configuration
        Dim tabHome As InnovaStudio.ISTab
        Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"})
        Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
        Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "VideoDialog", "TableDialog"})
        Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})
        tabHome = New InnovaStudio.ISTab("tabHome", "Home")
        tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit3, grpEdit4})
        oEdit1.ToolbarTabs.Add(tabHome)

        'Apply stylesheet for the editing content
        oEdit1.Css = "styles/default.css"

        'Loading content into the Editor
        oEdit1.Text = "<p>First Paragraph here...</p>"

Publishing Content

When you display/publish your content result anywhere on your web sites, please include the following:

1. Include the css file that you defined for editing content (using oEdit1.css = "styles/default.css").

        <link href="styles/default.css" rel="stylesheet" type="text/css" />

2. [Optional] Include Google Font integration scripts (This section is required only if using Google Fonts Dialog or if FontDialog or CompleteTextDialog buttons is used.

        <script src="scripts/common/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>
        <script src="scripts/common/webfont.js" type="text/javascript"></script>

Using File Browser

FILE BROWSER/MANAGER IS A FREE ADD-ON INCLUDED IN INNOVASTUDIO LIVE EDITOR PACKAGE (in /AddOns/assetmanager/ folder - You can copy this folder anywhere on your site). SINCE IT IS A STANDALONE APPLICATION AND CAN BE ACCESSED DIRECTLY FROM BROWSER, YOU WILL NEED TO SECURE IT BY ADDING USER CHECK/AUTHENTICATION TO:

- assetmanager/asset.[aspx/asp/php]

SECURITY CHECK MUST ALSO BE ADDED TO OTHER FILES IN FILE BROWSER FOLDER SUCH AS:

- assetmanager/server/delfile.[ashx/asp/php]
- assetmanager/server/delfolder.[ashx/asp/php]
- assetmanager/server/newfolder.[ashx/asp/php]
- assetmanager/server/upload.[ashx/asp/php]

To enable custom file browser in the Image & Link dialogs, use fileBrowser property.

        oEdit1.FileBrowser = "/assetmanager/asset.aspx"

To specify folder location to browse, set the base variable (in asset.aspx):

        var base = "/images";

To disable the Upload & Delete files and Create & Delete folders features, set the readonly variable to true (in asset.aspx):

        var readonly = true;

Some applications require File Browser that returns full file path (eg. in Newsletter editing, etc). To enable full file path feature, set the fullpath variable to true (in asset.aspx):

        var fullpath = true;

Upload File Types

To set allowed file types for upload:

In assetmanager/server/upload.ashx

	Private Const UPLOAD_FILE_TYPES as String = "jpg|jpeg|gif|png|txt|pdf|zip"

Allowed file types/extensions are separated by pipe (|) character, without space. Use empty string to allow all file types.

Configure Toolbar

Live Editor support tabs and group toolbar. To set toolbar mode

	oEdit1.ToolbarMode = 1;

Possible values are (2 is default):

Use tabs and groups property to configure toolbar buttons. Here is editor's default tabs and groups configuration.


	Dim tabHome As InnovaStudio.ISTab
	Dim tabStyle As InnovaStudio.ISTab

	Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"})
	Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
	Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "TableDialog"})
	Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"InternalLink", "CustomObject"})
	Dim grpEdit5 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit5", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})

	tabHome = New InnovaStudio.ISTab("tabHome", "Home")
	tabStyle = New InnovaStudio.ISTab("tabStyle", "Style")

	tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit5})
	tabStyle.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit3, grpEdit4})

	oEdit1.ToolbarTabs.Add(tabHome)
	oEdit1.ToolbarTabs.Add(tabStyle)

The ISTab object has the following properties:

The ISGroup object has the following properties:

List of Available Toolbar Buttons

Adding Custom Button and Dropdown Button

You can add your own custom buttons using arrCustomButtons property.

	'Add standard custom button
	oEdit1.ToolbarCustomButtons.Add(New CustomButton("MyCustomButton", "alert('Run custom command..')", "Caption here", "btnCustom1.gif"))

	'Add dropdown custom button
	Dim cstDropdown as CustomButton = New CustomButton("MyDropdownButton", "", "Caption here", "btnCustom2.gif")
	cst.DropDownItems.add(new CustomDropDownItem("Item1", "alert('1')", "Item 1"))
	cst.DropDownItems.add(new CustomDropDownItem("Item2", "alert('2')", "Item 2"))
	cst.DropDownItems.add(new CustomDropDownItem("Item3", "alert('3')", "Item 3"))
	oEdit1.ToolbarCustomButtons.Add(cstDropdown)

	'Toolbar Buttons Configuration
	Dim tabHome As InnovaStudio.ISTab
	Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"})
	Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
	Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "VideoDialog", "TableDialog"})
	Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"InternalLink", "CustomObject", "MyCustomButton", "MyDropdownButton", "CustomTag"})
	Dim grpEdit5 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit5", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})
	tabHome = New InnovaStudio.ISTab("tabHome", "Home")
	tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit3, grpEdit4, grpEdit5})
	oEdit1.ToolbarTabs.Add(tabHome)
Button image file is located in scripts/icons/ folder. Use btnCustom1.gif, btnCustom2.gif, .. or create your own button image.

Adding Custom Tags Insertion

With this feature, you can insert predefined custom tags into the current Editor content. Custom Tag insertion is a feature that is commonly used in mailing applications or template editing in web content management systems.

        'Toolbar Buttons Configuration
        Dim tabHome As InnovaStudio.ISTab
        Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"})
        Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
        Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "VideoDialog", "TableDialog"})
        Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"InternalLink", "CustomObject", "CustomTag"})
        Dim grpEdit5 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit5", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})
        tabHome = New InnovaStudio.ISTab("tabHome", "Home")
        tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit3, grpEdit4, grpEdit5})
        oEdit1.ToolbarTabs.Add(tabHome)

        'Define "CustomTag" dropdown
        oEdit1.CustomTags.add(new Param("First Name","{%first_name%}"))
        oEdit1.CustomTags.add(new Param("Last Name","{%last_name%}"))
        oEdit1.CustomTags.Add(New Param("Email", "{%email%}"))

Adding "InternalLink" & "CustomObject" buttons

This buttons are commonly used in CMS application to open file browser, internal page links, etc. To open your own custom page, use modalDialog method.

        'Toolbar Buttons Configuration
        Dim tabHome As InnovaStudio.ISTab
        Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"})
        Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
        Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "VideoDialog", "TableDialog"})
        Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"InternalLink", "CustomObject"})
        Dim grpEdit5 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit5", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})
        tabHome = New InnovaStudio.ISTab("tabHome", "Home")
        tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit3, grpEdit4, grpEdit5})
        oEdit1.ToolbarTabs.Add(tabHome)

        'Define "InternalLink" button
        oEdit1.InternalLink = "my_custom_dialog.htm"
        oEdit1.InternalLinkWidth = 650
        oEdit1.InternalLinkHeight = 350

        'Define "CustomObject" button
        oEdit1.CustomObject = "my_custom_dialog.htm"
        oEdit1.CustomObjectWidth = 650
        oEdit1.CustomObjectHeight = 350

Inserting HTML Content into the Editor

To insert custom html from your own custom page (opened using modalDialog method), use insertHTML.

        var sHTML = "<p>Best Wishes</p>";
        var obj = parent.oUtil.obj;
        obj.insertHTML(sHTML);

Editing Mode

To enable full html editing, set EditMode property to XHTML. The default value is XHTMLBody (for editing body content only).

        oEdit1.EditMode = EditorModeEnum.XHTML

Inserting <DIV>, <P> or <BR> when pressing Enter Key

You can configure the editor to insert <DIV>, <P> or <BR> when pressing enter key.

        oEdit1.ReturnKeyMode = 1

Possible values are:

MS Word Cleaning and Paste Text

By default, when user paste content into editing panel (using CTRL+V), editor will clean the content and remove any non html standard tags. This is particullary useful for paste content from other resource like MS Word.

However you can also configure editor to remove any html tags from content pasted into editor using pasteTextOnCtrlV property:

        oEdit1.PasteTextOnCtrlV = true

Flickr Image Configuration

To enable Flickr Image browser:

        oEdit1.EnableFlickr = true

To configure default Flickr Image to browse, specify Flickr Username:

        oEdit1.FlickrUser = "USERNAME"

Enable/Disable Tabs and Other Options

To enable Styles tab in the Link Dialog:

        oEdit1.enableCssButtons = true;

To disable Styles Tab in Image Dialog:

        oEdit1.enableImageStyles = false;

To disable Styles Tab in Youtube Dialog:

        oEdit1.enableYTVideoStyles = false;

To enable Table Autoformat on the Table Dialog:

        oEdit1.EnableTableAutoformat = true

To disable Google Fonts, remove "FontDialog" from the toolbar configuration, and add "FontName" (for normal font dropdown):

        'Toolbar Buttons Configuration
        Dim tabHome As InnovaStudio.ISTab
        Dim grpEdit1 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit1", "", New String() {"Bold", "Italic", "Underline", "FontName", "ForeColor", "TextDialog", "RemoveFormat"})
        Dim grpEdit2 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit2", "", New String() {"Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"})
        Dim grpEdit3 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit3", "", New String() {"LinkDialog", "ImageDialog", "VideoDialog", "TableDialog"})
        Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"Undo", "Redo", "FullScreen", "SourceDialog"})
        tabHome = New InnovaStudio.ISTab("tabHome", "Home")
        tabHome.Groups.AddRange(New InnovaStudio.ISGroup() {grpEdit1, grpEdit2, grpEdit3, grpEdit4})
        oEdit1.ToolbarTabs.Add(tabHome)

To enable "Open in a Lightbox" in the Link & Image Dialog:

        oEdit1.enableLightbox = true;

Then please find FancyBox script in /AddOns/fancybox13/ folder in the package and copy the folder into scripts/common/ (or anywhere on your site).
Include the FancyBox script into your page (where your content is published) using:

        <script src="scripts/common/fancybox13/jquery.easing-1.3.pack.js" type="text/javascript"></script>
        <script src="scripts/common/fancybox13/jquery.mousewheel-3.0.2.pack.js" type="text/javascript"></script>
        <script src="scripts/common/fancybox13/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
        <link href="scripts/common/fancybox13/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $('a[rel=lightbox]').fancybox();
            });
        </script>
(Note that JQuery is required)

Localization

You can localize the Editor to be displayed in specific language by setting Language property:

    <editor:wysiwygeditor
        Runat="server"
        scriptPath="scripts/"
        Language="da-DK"
        Content="Hello World!"
        ID="oEdit1" />

The current available values for Language property are: da-DK (Danish), nl-NL (Dutch), fi-FI (Finnish), fr-FR (French), de-DE (German), zh-CHS (Chinese Simplified), zh-CHT (Chinese Traditional), nn-NO (Norwegian), es-ES (Spanish), sv-SE (Swedish). it-IT (Italian). If Language property is not specified, English (en-US) version will be displayed.

Note:

Editing CSS/External Stylesheet

You can assign one or more external stylesheets for editing in editor.

    oEdit1.Css = "styles/default.css";

or use comma separated value for multiple files (without space between comma)

    oEdit1.css = "/styles/file1.css,/styles/file2.css,/styles/file3.css";

Note that path to css file should be relative to root (relative to website root).