如何在我的ASP.net项目中添加html编辑器？

时间：2014-04-25 14:53:50

标签： html asp.net visual-studio-2010 html-editor

我已经在Visual Studio中搜索了我的工具箱，但我无法在其中的任何位置看到此选项。基本上，我有一个页面，我想添加一个HTML编辑器。如果我使用的是不正确的术语，下面是我要添加的内容的图片：

enter image description here

基本上，我需要这个文本编辑器来格式化它写入HTML的内容。我正在使用具有母版页的ASP.NET Web表单页面。我读过有关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工具，那将是理想的！

4 个答案:

答案 0 :(得分：5)

我不知道.NET中允许您编辑HTML的任何控件。但是，Microsoft确实提供了Ajax控件工具包，其中包含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控件，支持rich   格式。例如，HtmlEditorExtender允许用户申请   粗体，斜体，下划线，下标，上标和不同   前景和背景颜色到文本。

您需要将Ajax Control Toolkit添加到项目中才能使用它。我喜欢在可能的情况下使用NuGet添加库，here它在NuGet上。

我没有使用过TinyMCE，但我听说过它的好消息。是的，您可以在ASP.NET中使用它。

答案 1 :(得分：0)

您是否考虑过使用 Telerik ASP.NET AJAX控件中的 RadEditor ？它确实是.NET最好的HTML /内容编辑器之一： http://www.telerik.com/products/aspnet-ajax.aspx

如果RadEditor超出预算范围，那么您应该考虑实施 CKEditor ？

答案 2 :(得分：0)

Ajax HTMLEditorExtender控件可以用作文本编辑器来格式化用HTML编写的内容。以下是在webform中添加ajax HMTLEditorExtender控件的步骤 -

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

答案 3 :(得分：0)

请按照以下步骤操作：

  1. 添加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" />
相关问题
最新问题