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

Question

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:

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 1

Please follow the below steps:

1. Add EditorLite.vb and Inherits AjaxControlToolkit.HTMLEditor.Editor

    Imports System.Collections
    Imports System.Collections.ObjectModel
   
    Namespace CustomEditor
    Public Class EditorLite
    Inherits AjaxControlToolkit.HTMLEditor.Editor
   
    Protected Overrides Sub FillBottomToolbar()
        BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode)
        BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode)
        BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode)
    End Sub
   
    Protected Overrides Sub FillTopToolbar()
        Dim options As Collection(Of AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption)
        Dim optiond As AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator)
        Dim FixedForeColor As AjaxControlToolkit.HTMLEditor.ToolbarButton.FixedForeColor = New AjaxControlToolkit.HTMLEditor.ToolbarButton.FixedForeColor
        TopToolbar.Buttons.Add(FixedForeColor)
        Dim ForeColorSelector As AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColorSelector = New AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColorSelector
        FixedForeColor.ID = "FixedForeColor"
        ForeColorSelector.FixedColorButtonId = "FixedForeColor"
        TopToolbar.Buttons.Add(ForeColorSelector)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColorClear)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator)
        Dim fontName As AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName = New AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName
        TopToolbar.Buttons.Add(fontName)
        options = fontName.Options
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = ""
        optiond.Text = ""
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "arial,helvetica,sans-serif"
        optiond.Text = "Arial"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "courier new,courier,monospace"
        optiond.Text = "Courier New"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "georgia,times new roman,times,serif"
        optiond.Text = "Georgia"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "tahoma,arial,helvetica,sans-serif"
        optiond.Text = "Tahoma"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "times new roman,times,serif"
        optiond.Text = "Times New Roman"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "verdana,arial,helvetica,sans-serif"
        optiond.Text = "Verdana"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "impact"
        optiond.Text = "Impact"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "wingdings"
        optiond.Text = "WingDings"
        options.Add(optiond)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator)
        Dim fontSize As AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize = New AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize
        TopToolbar.Buttons.Add(fontSize)
        options = fontSize.Options
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = ""
        optiond.Text = ""
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "8pt"
        optiond.Text = "1 ( 8 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "10pt"
        optiond.Text = "2 (10 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "12pt"
        optiond.Text = "3 (12 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "14pt"
        optiond.Text = "4 (14 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "18pt"
        optiond.Text = "5 (18 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "24pt"
        optiond.Text = "6 (24 pt)"
        options.Add(optiond)
        optiond = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption
        optiond.Value = "36pt"
        optiond.Text = "7 (36 pt)"
        options.Add(optiond)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator)
        TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.RemoveStyles)
    End Sub
    End Class
   
    Public Class LiteNoBottom
    Inherits EditorLite
   
    Protected Overrides Sub FillBottomToolbar()
   
    End Sub
    End Class
    End Namespace
   

Step 2: Consume LiteNoBottom in source code:

<%@ Register Namespace="CustomEditor" TagPrefix="cc1" %>
<cc1:LiteNoBottom ID="Editor1" runat="server" CssClass="Editor" />

Answer 2

Ajax HTMLEditorExtender control can be used as text editor to format what is written in HTML. Here are steps to add ajax HMTLEditorExtender control in webform -

http://newapputil.blogspot.in/2014/06/adding-ajax-htmleditorextender-control.html

Answer 3

Have you considered using the RadEditor that is part of the Telerik ASP.NET AJAX Controls? It really is one of the best HTML/Content editors out there for .NET: http://www.telerik.com/products/aspnet-ajax.aspx

If the RadEditor is out of budget scope, then perhaps you should consider implementing the CKEditor?

• ckeditor in asp.net
• http://ckeditor.com

Answer 4

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.