Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.
Intersoft Support Center

Create Custom Pane Content

This walkthrough shows you how to create custom task pane in WebTextEditor.

During this walkthrough, you will learn how to do the following:

  • Create custom task pane in WebTextEditor.

 Prerequisites

In order to complete this walkthrough, you will need the following:

  • Visual Studio 2008/2010 Application.

 Step-By-Step Instructions

To create custom task pane in WebTextEditor

  1. Launch Visual Studio.NET 2008.
  2. Click on File menu, then select New and click Web Site.
  3. Select ASP.NET Web Site in the Template box and set Location to HTTP.
  4. Named the Web Site and click OK.
  5. Copy the images folder under WebTextEditor >> Images from the WebTextEditor sample to your project root folder.
  6. Right-click on Project's name and select Add New Item.
  7. Select WebForm in the My Templates box and named it as Walkthrough.aspx.
  8. Drag WebTextEditor instance from ToolBar to WebForm
  9. In the WebForm aspx, create EmoticonPane() and InsertEmoticon() javascript function for the custom task pane. Here is the code:
    JavaScript Copy Code 
    function EmoticonPane()
{
   TaskPaneContent.call(this);   //inherit from TaskPaneContent object 
   this.Id = "Emoticon"; 
   this.OnCreate = function()
   {     
      this.Type = "Emoticon";     
      this.Caption = "Emoticons";
   }; 
   this.GetContainerElement = function()
   {     
      var str = "<div id='frame'>";     
      for (var i = 1; i < 24; i++)     
      {         
         str += "<div style='float: left; padding-left: 5px;padding-bottom: 5px;'>"             
            + "<img src='./images/other/smiley" + i + ".gif' style='cursor: pointer' "             
            + "title='Click here to add this emoticon' /></div>";     
      }     
      str += "</div>";     
      var div = document.createElement("DIV");     
      div.innerHTML = str;     
      return div.children[0];
   }; 
   this.OnAfterRender = function()
   {     
      var el = document.getElementById("frame");     
      Listener.Add(el, "onclick", InsertEmoticon, this);
   }; 
   this.OnClose = function()
   {     
      var rte = this.Parent.Parent;     
      rte.OnToolbarCommandNotify("Emoticon", false);
   }; 
   this.OnContentOptionsSelected = function()
   {     
      var pane = this.Parent;     
      var rte = pane.Parent;       
      rte.OnToolbarCommandNotify("Emoticon", pane.ActiveType == "Emoticon" ? true : false);
   }; 
   this.Unload = function()
   {     
      var el = document.getElementById("frame");     
      Listener.Unload(el);};
   }  

function InsertEmoticon()
{ 
   var paneContent = this; 
   var rte = paneContent.Parent.Parent; 
   var el = event.srcElement; 
   if (el.tagName == "IMG")     
      rte.InsertImage(el.src);
}

    The GetContainerElement function will create the list of images for this custom task pane. We also need to add element onclick event in the custom task pane during AfterRender event to add the image to the TextEditor area.
  10. Create the new Emoticon task pane during WebTextEditor OnInitialize client-side event. Here is the code: 
    rte.RegisterPaneContent(new EmoticonPane());
  11. Implement WebTextEditor OnToolBarClick client-side event to toggle the Emoticon command that we create during InitializeToolBar server-side event (detailed on the next step) and the Media Gallery command. Here is the code:
    JavaScript Copy Code 
    function WebTextEditor1_OnToolBarClick(controlId, command, commandSection)
{ 
   var rte = ISGetObject(controlId); 
   switch (command.Name) 
   {    
      case "cmdEmoticon":          
         if (command.IsActive)              
            rte.ShowTaskPane(command.Text);          
         else              
            rte.HideTaskPane();          
         rte.OnToolbarCommandNotify("MediaGallery", false);          
         break;      
      case "cmdMediaGallery":          
         rte.OnToolbarCommandNotify("Emoticon", false);          
         break; 
   }
}

  12. Implement WebTextEditor InitializeToolBar server-side event to add Emoticon command to show/hide the Emoticon task pane. Here is the code:
    C# Copy Code 
    protected void WebTextEditor1_InitializeToolBar(object sender, ISNet.WebUI.WebTextEditor.WebTextEditorToolBarArgs e)
{
   WebTextEditorToolBar tb = e.GetToolBarByCategory(WebTextEditorToolBarCategory.Standard);
   if (tb != null)
   {   
      WebTextEditorToolCommandCollection commands = tb.ToolCommands;   
      WebTextEditorToolCommand cmd = new WebTextEditorToolCommand();   
      cmd.Name = "cmdEmoticon";   
      cmd.Text = "Emoticon";   
      cmd.ToggleGroupName = "TaskPane";   
      cmd.Type = WebTextEditorToolBarCommandType.ToggleButton;   
      cmd.DisplayMode = WebTextEditorToolBarCommandDisplayMode.Image;   
      cmd.Image = "./images/other/smiley1.gif";   
      commands.Add(cmd);
   }
}

  13. Run the sample in the Web Browser.
Previous Next