Как мне добавить HTML-редактор в мой проект ASP.net?

Я просмотрел свой набор инструментов в Visual Studio и нигде не вижу эту опцию. По сути, у меня есть страница, на которую я хочу добавить редактор HTML. Если я использую неправильный термин, вот изображение того, что я хотел бы добавить:

введите описание изображения здесь

По сути, мне нужен этот текстовый редактор для форматирования написанного в HTML. Я использую страницу веб-форм ASP.NET с главной страницей. Я читал о TinyMCE, но не совсем уверен, что я хочу этого? Или как добавить в свой проект в Visual Studio. Есть ли в наборе инструментов аналог?

Это мой код на данный момент:

<%@ 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>

Спасибо!

Редактировать:

Мне нужно что-то опубликованное Microsoft. К сожалению, я не могу использовать стороннее программное обеспечение. Если кто-нибудь знает какие-либо инструменты Microsoft, это было бы идеально!

Sarah 25.04.2014 источник

Ответы (4)

arrow_upward
6
arrow_downward

Мне не известны какие-либо элементы управления, которые входят в состав .NET и позволяют редактировать HTML. Но Microsoft предоставляет Ajax Control Toolkit, который включает HTML Editor Extender. По сути, вы просто говорите Extender, что вы хотите, чтобы он включал, и указываете ему, какой TextBox «расширить» для поддержки HTML.

Пример.

 <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>

Из документации:

HtmlEditorExtender - это элемент управления ASP.NET AJAX, который позволяет расширить стандартный элемент управления ASP.NET TextBox за счет поддержки расширенного форматирования. Например, HtmlEditorExtender позволяет пользователям применять к тексту полужирный шрифт, курсив, подчеркивание, подстрочный индекс, надстрочный индекс и другой цвет переднего плана и фона.

Вам нужно будет добавить Ajax Control Toolkit в свой проект, чтобы использовать его. Мне нравится использовать NuGet для добавления библиотек, когда это возможно, здесь, это на NuGet.

Я не использовал TinyMCE, но слышал о нем хорошие отзывы. Да, вы можете использовать его в ASP.NET.

mason 25.04.2014

arrow_upward
0
arrow_downward

Рассматривали ли вы возможность использования RadEditor, который является частью Telerik ASP.NET AJAX Controls? Это действительно один из лучших редакторов HTML / контента для .NET: http://www.telerik.com/products/aspnet-ajax.aspx

Если RadEditor выходит за рамки бюджета, возможно, вам стоит подумать о внедрении CKEditor?

landsteven 25.04.2014

comment

Однако это стоит как минимум 1000 долларов. - mason; 25.04.2014

arrow_upward
0
arrow_downward

Элемент управления Ajax HTMLEditorExtender можно использовать в качестве текстового редактора для форматирования того, что написано в HTML. Вот шаги по добавлению элемента управления ajax HMTLEditorExtender в веб-форму:

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

nvivekgoyal 08.09.2014

arrow_upward
0
arrow_downward

Пожалуйста, выполните следующие шаги:

Добавить EditorLite.vb и наследует 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

Шаг 2: используйте LiteNoBottom в исходном коде:

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

Raj 23.06.2020

Как мне добавить HTML-редактор в мой проект ASP.net?

Ответы (4)

Похожие вопросы