HTML Editor Description using ajax tool kit best example.

Description

AjaxControlToolkit contains a rich set of controls that you can use to build highly responsive and interactive AJAX-enabled Web applications. AjaxControlToolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using AjaxControlToolkit, you can build AJAX-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.

ASP.NET AJAX Control Toolkit (ajaxtoolkit.net)

HTMLEditor Sample (ajaxtoolkit.net)

HTMLEditor is an ASP.NET AJAX Control that allows you to easily create and edit HTML content. Various buttons in toolbar are used for content editing. You can see generated HTML markup and preview document.

<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="HTMLEditor" %>
...
<HTMLEditor:Editor runat="server" 
        Height="300px" 
        Width="100%"
        AutoFocus="true"
/>

Displaying HTMLEditor in an htm page (ajaxtoolkit.net)

You can change the look and feel of HTMLEditor using the HTMLEditor CssClass property. HTMLEditor has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\HTMLEditor\Editor.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a HTMLEditor control can be styled accordingly. For example if the CssClass property was set to "CustomEditorStyle" this is how the css to style the HTMLEditor top toolbar would look:.CustomEditorStyle .ajax__htmleditor_editor_toptoolbar {
background-color:#F0F0F0; padding: 0px 0px 2px 2px;
}
HTMLEditor Css classes
.ajax__htmleditor_editor_container: A container element (table) that wraps all of the HTMLEditor.
Child CSS classes: .ajax__htmleditor_editor_toptoolbar, .ajax__htmleditor_editor_editpanel, .ajax__htmleditor_editor_bottomtoolbar.
.ajax__htmleditor_editor_toptoolbar: A container element that wraps all buttons of the top toolbar.
Child CSS classes: .ajax__htmleditor_toolbar_button, .ajax__htmleditor_toolbar_button_hover.
.ajax__htmleditor_editor_editpanel: A container element that wraps editing panel (in any mode).
Child CSS classes: none.
.ajax__htmleditor_editor_bottomtoolbar: A container element that wraps all buttons of the bottom toolbar.
Child CSS classes: .ajax__htmleditor_toolbar_button, .ajax__htmleditor_toolbar_button_hover.
.ajax__htmleditor_toolbar_button: This is applied to a button of toolbar.
Child CSS classes: none.
.ajax__htmleditor_toolbar_button_hover: This is applied to a button of toolbar when the mouse is hovering over.
Child CSS classes: none.
div.ajax__htmleditor_toolbar_button label: This is applied to a <label> element of "selector button" in toolbar (Font, Size).
Child CSS classes: none.
div.ajax__htmleditor_toolbar_button select: This is applied to a <select> element of "selector button" in toolbar.
Child CSS classes: none.
div.ajax__htmleditor_toolbar_button select option: This is applied to <select> element's options of "selector button" in toolbar.
Child CSS classes: none.

.NetCLI

dotnet add package AjaxControlToolkit --version 20.1.0

Get Started with the AJAX Control Toolkit (C#) | Microsoft Learn

Use the Ajax tool kit using NuGet package.

adding ajax took kit DLL in toolbox. Go to the bin folder of your project like given example.

The Sanitizer is not configured in the web.config file. Either install the AjaxControlToolkit.HtmlEditor.Sanitizer NuGet package or set the EnableSanitization property to False (insecure).

Need to do add property in html ajax editor.

   EnableSanitization="false"

<ajaxToolkit:HtmlEditorExtender TargetControlID="htmleditor" ID="HtmlEditorExtender1" EnableSanitization="false" runat="server"></ajaxToolkit:HtmlEditorExtender>

<asp:TextBox runat="server" TextMode="MultiLine" ID="htmleditor"></asp:TextBox>

===================================

add this tag

<asp:ScriptManager runat="server">

</asp:ScriptManager>

Final Code below :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

</head>

<body>

<asp:ScriptManager runat="server">

</asp:ScriptManager>

<div>

<ajaxToolkit:HtmlEditorExtender TargetControlID="htmleditor" ID="HtmlEditorExtender1" EnableSanitization="false" runat="server"></ajaxToolkit:HtmlEditorExtender>

<asp:TextBox runat="server" Width="100%" Height="400px" TextMode="MultiLine" ID="htmleditor"></asp:TextBox>

</div>

</form>

</body>

</html>

HTML Editor Description using ajax tool kit best example.

The Sanitizer is not configured in the web.config file. Either install the AjaxControlToolkit.HtmlEditor.Sanitizer NuGet package or set the EnableSanitization property to False (insecure).

Contact Form