RadEditor for ASP.NET
Contents
Creating an Emoticon Dropdown Send comments on this topic.
DropDowns > Creating an Emoticon Dropdown

Glossary Item Box

Here is an example on how to create an emoticon dropdown, which will insert an emoticon in the editor's content:

  1. Download the zip file (from the EXAMPLE FILES section below) that contains 9 emoticons. You can replace all of them at a later time, if needed.
  2. Unzip the icons in a folder named Emoticons in the root of your web application.
  3. Add the custom dropdown to the editor toolbar via the ToolsFile.xml file:
    ASP.NET Copy Code
    <tool iconurl="~/Emoticons/smil1.GIF" name="Emoticons" type="dropdown" dropdownwidth="95px" ItemsPerRow="3">
         <item iconurl="./Emoticons/smil1.GIF" value="./Emoticons/smil1.GIF" />
         <item iconurl="./Emoticons/smil2.GIF" value="./Emoticons/smil2.GIF" />
         <item iconurl="./Emoticons/smil3.GIF" value="./Emoticons/smil3.GIF" />
         <item iconurl="./Emoticons/smil4.GIF" value="./Emoticons/smil4.GIF" />
         <item iconurl="./Emoticons/smil8.GIF" value="./Emoticons/smil8.GIF" />
         <item iconurl="./Emoticons/smil6.GIF" value="./Emoticons/smil6.GIF" />
         <item iconurl="./Emoticons/smil7.GIF" value="./Emoticons/smil7.GIF" />
         <item iconurl="./Emoticons/smil9.GIF" value="./Emoticons/smil9.GIF" />
         <item iconurl="./Emoticons/smil11.GIF" value="./Emoticons/smil11.GIF" />
    </    tool>
    Note that the iconurl and the value attirubute should point correctly to the respective image icon placed in the Emoticons folder.

  4. In your editor page, add the following javascript command that will be executed when the user presses some of the dropdown icons, i.e.

    ASP.NET Copy Code
    <rad:RadEditor id="RadEditor1" Editable="true" Runat="server"></rad:RadEditor>
    <    script type="text/javascript">
    RadEditorCommandList["Emoticons"] = function(commandName, editor, oTool)
    {
       oValue = oTool.GetSelectedValue();
       editor.PasteHtml ("    <img src='" + oValue + "' border=0>");
    };
    </script>

     

  5. Once you have accomplished all of the above steps, your editor toolbar should look similar to this:

Emoticons dropdown

EXAMPLE FILES

Emoticons