How do I add an html editor to my ASP.net project?

Sarah picture Sarah · Apr 25, 2014 · Viewed 13.2k times · Source

I've searched through my toolbox in Visual Studio and I can't see this option anywhere in it. Basically, I have a page that I want to add an HTML editor on. In case I am using the incorrect term, here is a picture of what I would like to add:

enter image description here

Essentially, I need this text editor to format what is written in it to HTML. I am using ASP.NET web forms page that has a Master Page. I have read about TinyMCE but I am not really sure if this is what I want? Or how to add it to my project in Visual Studio. Is there an equivalent in the toolbox?

This is my code so far:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages    /Columns.Master" CodeBehind="NoticeDetail.aspx.vb" Inherits="...NoticeDetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headmeta" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headCustomScriptsCSS" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpMainContent" runat="server">
<h1>Notice Details</h1>

<!-- this is where I want to add the editor -->

</asp:Content>

Thanks!

Edit:

I need something published by Microsoft. I am not able to use any 3rd party software unfortunately. If anyone knows of any Microsoft tools, that would be ideal!

Answer

mason picture mason · Apr 25, 2014

I'm not aware of any controls that ship as part of .NET that allow you to edit HTML. But, Microsoft does provide the Ajax Control Toolkit, which includes the HTML Editor Extender. Basically you just tell the Extender what you want it to include and tell it what TextBox to "extend" to support HTML.

Example.

 <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" 
            TargetControlID="TextBox1" DisplaySourceTab="true" 
            runat="server"/>
            <Toolbar> 
                <ajaxToolkit:Undo />
                <ajaxToolkit:Redo />
                <ajaxToolkit:Bold />
                <ajaxToolkit:Italic />
                <ajaxToolkit:Underline />
                <ajaxToolkit:StrikeThrough />
                <ajaxToolkit:Subscript />
                <ajaxToolkit:Superscript />
                <ajaxToolkit:JustifyLeft />
                <ajaxToolkit:JustifyCenter />
                <ajaxToolkit:JustifyRight />
                <ajaxToolkit:JustifyFull />
                <ajaxToolkit:InsertOrderedList />
                <ajaxToolkit:InsertUnorderedList />
                <ajaxToolkit:CreateLink />
                <ajaxToolkit:UnLink />
                <ajaxToolkit:RemoveFormat />
                <ajaxToolkit:SelectAll />
                <ajaxToolkit:UnSelect />
                <ajaxToolkit:Delete />
                <ajaxToolkit:Cut />
                <ajaxToolkit:Copy />
                <ajaxToolkit:Paste />
                <ajaxToolkit:BackgroundColorSelector />
                <ajaxToolkit:ForeColorSelector />
                <ajaxToolkit:FontNameSelector />
                <ajaxToolkit:FontSizeSelector />
                <ajaxToolkit:Indent />
                <ajaxToolkit:Outdent />
                <ajaxToolkit:InsertHorizontalRule />
                <ajaxToolkit:HorizontalSeparator />
                <ajaxToolkit:InsertImage />
            </Toolbar>
        </ajaxToolkit:HtmlEditorExtender>

From the documentation:

The HtmlEditorExtender is an ASP.NET AJAX Control that enables you to extend the standard ASP.NET TextBox control with support for rich formatting. For example, the HtmlEditorExtender enables users to apply bold, italic, underline, subscript, superscript, and different foreground and background color to text.

You'll need to add the Ajax Control Toolkit to your project in order to make use of it. I like to use NuGet to add libraries when possible, here it is on NuGet.

I have not used TinyMCE, but I've heard good things about it. Yes, you can use it in ASP.NET.