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>"
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>
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;
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", "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:
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.
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%}"))
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
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 enable Flickr Image browser:
oEdit1.EnableFlickr = true
To configure default Flickr Image to browse, specify Flickr Username:
oEdit1.FlickrUser = "USERNAME"
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)
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:
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).