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", "Emoticons"})
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>"
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. Include Google Font integration scripts (in the <head> section of your web page).
<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>
3. Include Windows Lightbox integration scripts (in the <head> section of your web page). It is required to enable 'Open Larger' feature on Flickr image inserted using the Editor.
<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>
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;
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.
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", "YoutubeDialog", "TableDialog", "Emoticons"})
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:
You can add your own custom buttons using arrCustomButtons property.
'Add Custom Buttons
oEdit1.ToolbarCustomButtons.Add(New CustomButton("MyCustomButton1", "alert('Run custom command..')", "Caption here", "btnCustom1.gif"))
oEdit1.ToolbarCustomButtons.Add(New CustomButton("MyCustomButton2", "alert('Run custom command..')", "Caption here", "btnCustom1.gif"))
'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", "Emoticons"})
Dim grpEdit4 As InnovaStudio.ISGroup = New InnovaStudio.ISGroup("grpEdit4", "", New String() {"InternalLink", "CustomObject", "MyCustomButton1", "MyCustomButton2", "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.
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", "Emoticons"})
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%}"))
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", "Emoticons"})
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
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);
To enable full html editing, set EditMode property to XHTML. The default value is XHTMLBody (for editing body content only).
oEdit1.EditMode = EditorModeEnum.XHTML
You can configure the editor to insert <DIV>, <P> or <BR> when pressing enter key.
oEdit1.ReturnKeyMode = 1
Possible values are:
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
To disable Flickr Image browser:
oEdit1.EnableFlickr = false
To configure default Flickr Image to browse, specify Flickr Username:
oEdit1.FlickrUser = "USERNAME"
To disable Css Buttons on the Link Dialog:
oEdit1.EnableCssButtons = false
To disable "Open in a Lightbox" on the Link & Image Dialog:
oEdit1.EnableLightbox = false
To disable Table Autoformat on the Table Dialog:
oEdit1.EnableTableAutoformat = false
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", "Emoticons"})
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)
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: