Nview html editor
You must add the class in Listing 2 to your App_Code folder so that the class will be compiled automatically. Protected override void FillBottomToolbar()ī(new ()) ī(new ()) Listing 2 - App_Code\CustomEditor.cs using AjaxControlToolkit.HTMLEditor Furthermore, the HTML tab has been removed from the bottom of the editor (but the Design and Preview tabs are still there). All other toolbar buttons have been removed. For example, the custom editor in Listing 2 only contains toolbar buttons for bold and italic. You customize the toolbar buttons by deriving a new HTML Editor from the base Editor class. Or, you might want to remove the font size dropdown list to prevent users from creating overly large text in a forum message post (see Figure 5).įigure 05: A customized HTML Editor( Click to view full-size image) For example, you might want to remove the HTML tab to prevent users from switching the HTML Editor into HTML mode. You can customize exactly which buttons appear in the editor. In the next section, we discuss how you can prevent JavaScript Injection Attacks. Be aware that this HTML content can contain JavaScript. The HTML Editor Content property is used to retrieve the HTML content entered into the HTML Editor. When you click the button, the contents of the HTML Editor appear in the Literal control (see Figure 4).įigure 04: Submitting a form with an HTML Editor( Click to view full-size image) The page in Listing 1 contains an HTML Editor control, a Button control, and a Literal control. Protected void btnSubmit_Click(object sender, EventArgs e) Listing 1 contains the source for an ASP.NET page that contains an HTML editor. For example, you normally want to set the Width and Height properties. It is named the Editor control (see Figure 3).įigure 03: The HTML Editor control( Click to view full-size image)Īfter you drag the HTML Editor onto a page, you can set its properties in the property sheet. The HTML Editor control is located in the toolbox with the rest of the AJAX Control Toolkit controls. For example, you can place it immediately below the opening server-side tag. You should place the ScriptManager control at the top of the page before any other controls on the page. The ScriptManager control is located beneath the AJAX Extensions tab in the Visual Studio/Visual Web Developer Express toolbox. Displaying the HTML Editorīefore you can use the HTML Editor in an ASP.NET page, you must first add a ScriptManager control to the page.
Nview html editor how to#
In this tutorial, you learn how to display the HTML Editor, how to customize the toolbar buttons that appear in the HTML Editor, and how to avoid Cross-Site Scripting Attacks.
You also are provided with the option to preview your HTML content (see Figure 2).įigure 02: Design, HTML, and Preview buttons( Click to view full-size image) The HTML editor enables you to enter content using a design mode or you can enter HTML directly. The HTML Editor includes options for changing font size, selecting a font, changing background color, modifying the foreground color, adding links, adding images, changing text alignment, and performing cut, copy, and paste operations (see Figure 1).įigure 01: The HTML Editor( Click to view full-size image) The goal of this tutorial is to provide you with an overview of the HTML Editor control included with the AJAX Control Toolkit. HTMLEditor is an ASP.NET AJAX Control that allows you to easily create and edit HTML content via buttons in a toolbar.