New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Content Comments

  • AddComment
  • RemoveComment
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  •  
  •  
  •  

RadEditor offers an easy way to add, edit or remove comments in the content area. This functionality is particularly handy when collaborating or sharing HTML content. The comments feature is based on the following three buttons:

  • Add Comment - highlight the area of text which you want to comment. Click on the Add Comment button to open the Comments dialog, where you can type the comment and save it via the Save dialog button. The inserted comment will be highlighted with a color dashed border in the content area. The Comments dialog will show up once a comment is selected.
  • Remove Comment - to remove an existing comment, select it and press the Remove Comment button.
  • Remove All Comments - be careful with this button, since it will delete all existing comments in the content area.

Configuration

To enable the Comments feature set the EnableComments property to true. The developer could further specify through the TrackChangesSetting inner-configuration-tag the Author's name (Author property) as well as to set a custom or a built-in CSS stylesheet for highlighting the comments in the content area (UserCssId property):

<telerik:RadEditor ID="theEditor" runat="server" EnableComments="true" ToolsFile="ToolsFile.xml">
    <TrackChangesSettings Author="AuthorName" UserCssId="reU0" />
</telerik:RadEditor>

ToolsFile.xml
<tools name="CommentsToolbar">
    <tool name="AddComment" Text="Add Comment"/>
    <tool name="RemoveComment" Text="Remove comment"/>
    <tool name="RemoveAllComments" Text="Remove All Comments"/>
</tools>

UserCssId - offers a set of 10 predefined styles ( reU0, reU1, reU2, reU3, reU4, reU5, reU6, reU7, reU8, reU9) for highlighting and distinguishing the comments made by different users. The reU<Author> classes are defined in the EditorContentarea.css file available in the installation folder of this demo. If needed, the front end developer could design additional classes for additional users, by following the convention to add new classes starting from reU10 and not using the existing colors.

Here is an example how to create a new reU10 class:

/* user border colors */
.reComment.reU10
{
    border-color: #00FFCC ;
}

Define the above classes in the EditorContentArea.css file and load the CSS file through the ContentAreaCssFile property of RadEditor.

Important Change!: Starting from Q2 2012 a breaking change was introduced regarding the convention of creating new class names. The classes which specify the comments of the different users were created with the following syntax .reComment_u<Author> before Q2 2012. Now the new classes are declared as .reComment.reU<Author>.

Generated Markup

The Add Comment feature will generate XHTML content similar to the following one:
<span class="reComment reU1" author="AuthorName" comment="XHTML is a stricter and cleaner version of HTML." title="AuthorName: XHTML is a stricter and cleaner version of HTML.: Saturday, May 19, 2012 3:23:10 PM"
 timestamp="1337430190136">XHTML</span>

Related Resources

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • EditorContentArea.css
    • EditorContentArea.css
    • styles.css
  • ToolsFile.xml
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div class="inner-demo-container">
            <%-- The div.inner-demo-container is relative positioned wrapper. 
                This helps positioning the Comment pop-up dialog to show up in the proper container. --%>

            <telerik:RadEditor RenderMode="Lightweight" ID="theEditor" runat="server" Width="600" Height="400" EnableComments="true"
                ToolsFile="ToolsFile.xml" CssClass="centered-editor">
                <TrackChangesSettings Author="RadEditorUser" UserCssId="reU1"></TrackChangesSettings>
                <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                    DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
                <Content>
            <h2 class="titleText">RadEditor for ASP.NET AJAX</h2>
            <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span> is not simply an <strong><span class="reComment reU1" author="RadEditorUser" comment="The computer language used to create world-wide-web pages which are read by browsers." title="RadEditorUser: The computer language used to create world-wide-web pages which are read by browsers.: Saturday, May 19, 2012 4:09:52 PM" timestamp="1337432992640">HTML</span></strong> Editor. It is what Microsoft chose to use in <strong><span class="reComment reU1" author="RadEditorUser" comment="The Microsoft Developer Network (MSDN) is the portion of Microsoft responsible for managing the firm's relationship with developers and testers." title="RadEditorUser: The Microsoft Developer Network (MSDN) is the portion of Microsoft responsible for managing the firm's relationship with developers and testers.: Saturday, May 19, 2012 4:10:06 PM" timestamp="1337433006688">MSDN</span></strong>, <strong><span class="reComment reU1" author="RadEditorUser" comment="CodePlex is an open-source Website where engineers and computer scientists share projects and ideas" title="RadEditorUser: CodePlex is an open-source Website where engineers and computer scientists share projects and ideas: Saturday, May 19, 2012 4:10:27 PM" timestamp="1337433027424">CodePlex</span></strong>, <span class="reComment reU1" author="RadEditorUser" comment="Microsoft TechNet is a Microsoft program and resource for technical information, news, and events for IT professionals" title="RadEditorUser: Microsoft TechNet is a Microsoft program and resource for technical information, news, and events for IT professionals: Saturday, May 19, 2012 4:10:48 PM" timestamp="1337433048320"><strong>TechNet</strong></span>, <span class="reComment reU1" author="RadEditorUser" comment="Microsoft Content Management Server (MCMS) is a Microsoft product intended for small to medium enterprises that require content management functionality on their web site, intranet or portal." title="RadEditorUser: Microsoft Content Management Server (MCMS) is a Microsoft product intended for small to medium enterprises that require content management functionality on their web site, intranet or portal.: Saturday, May 19, 2012 4:10:59 PM" timestamp="1337433059991"><strong>MCMS</strong></span> and even as an alternative to the default editor in
            <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <span class="reComment reU1" author="RadEditorUser" comment="XHTML is a stricter and cleaner version of HTML. More information is available at: http://www.w3.org/TR/xhtml1/#xhtml" title="RadEditorUser: XHTML is a stricter and cleaner version of HTML. More information is available at: http://www.w3.org/TR/xhtml1/#xhtml: Saturday, May 19, 2012 4:11:17 PM" timestamp="1337433077903"><strong>XHTML</strong></span> output, fast rendering, widest cross-browser support, and
            <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>:</p>
            <ul>
                <li>
                    <em><span class="reComment reU1" author="RadEditorUser" comment="Out of the box, RadEditor for ASP.NET AJAX outputs XHTML compliant content across all major browsers." title="RadEditorUser: Out of the box, RadEditor for ASP.NET AJAX outputs XHTML compliant content across all major browsers.: Saturday, May 19, 2012 4:11:30 PM" timestamp="1337433090647">Out-of-the-box XHTML-enabled Output</span>...</em>
                </li>
                <li>
                    <em>Unmatched Loading Speed and Performance</em>
                </li>
                <li>
                    <em>Microsoft Word-like Spell-checking</em>
                </li>
                <li>
                    <em><span class="reComment reU1" author="RadEditorUser" comment="RadEditor introduces a number of tools that help users paste formatted text from Microsoft Word or other applications, and apply different types of format stripping. For more information see: http://www.telerik.com/help/aspnet-ajax/editor-cleaning-word-formatting.html" title="RadEditorUser: RadEditor introduces a number of tools that help users paste formatted text from Microsoft Word or other applications, and apply different types of format stripping. For more information see: http://www.telerik.com/help/aspnet-ajax/editor-cleaning-word-formatting.html: Saturday, May 19, 2012 4:11:44 PM" timestamp="1337433104815">Seven Ways for Pasting from Word</span></em>
                </li>
                <li>
                    <em>Multilevel Undo/Redo with Action Trails</em>
                </li>
                <li>
                    <em>Extended Functionality Through Integrated Controls</em>
                </li>
            </ul>
                </Content>
            </telerik:RadEditor>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance