RadEditor for ASP.NET
Contents
Creating a Line Spacing Dropdown Send comments on this topic.
DropDowns > Creating a Line Spacing Dropdown

Glossary Item Box

 

Create a line spacing dropdown, from which you can change line distance within text

  1. Download the zip file (from the "Article Files" section below) that contains the dropdown image.
  2. Unzip the icon in the editor buttons folder (~\RadControls\Editor\Skin\<Used_Skin>\Buttons).
  3. Add the custom dropdown to the editor toolbar via the ToolsFile.xml file, i.e.

    ToolsFile.xml Copy Code
    <tool name="Line Spacing" type="dropdown" enabled="true" iconurl="~/RadControls/Editor/Skins/Default/Buttons/LineSpacing.gif">
    <item name="Default" value="" />
    <item name="Single space" value="20px" />
    <item name="1.5 Lines" value="35px" />
    <item name="Double spacing" value="50px" />
    </    tool>

    Note that the iconurl should point correctly to the respective image icon placed in the ~\RadControls\Editor\Skin\<Used_Skin>\Buttons folder.
     
  4. In your editor page, add the following javascript command that will be executed when the user presses some of the dropdown items, i.e.

    ASPX Copy Code
    <rad:RadEditor id="RadEditor1" Runat="server"></rad:RadEditor>
    <    script type="text/javascript">
    RadEditorCommandList["Line Spacing"] = function(commandName, editor, oTool)
    {
          oValue = oTool.GetSelectedValue();
      var cArea     = editor.GetContentArea();

          if (cArea.firstChild && cArea.firstChild.tagName == "P")
      {
             cArea.firstChild.style.lineHeight = oValue;
      }
          else
      {
             editor.SetHtml("<p style='line-height:" + oValue + "'>" + editor.GetHtml() + "</p>");
      }
    }    ;
    </script>

 

    Note that the name of the custom dropdown and the command must be the same.

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

Spacing

EXAMPLE FILES