# Getting Started Overview

The following tutorial demonstrates using RadEditor in a web page and adding content. This walkthrough also shows how to assign a predefined skin to the editor and how to add HTML to a list of snippets.

> caption Figure 1: Shows a plain RadEditor control.

![RadEditor control in the initial getting-started page](https://www.telerik.com/products/aspnet-ajax/documentation/assets/75a4eaf2474dc1df530ab062dd5e0168/getting-started-radeditor.png)

## How to Enable RadEditor Dialogs

1. Add a **RadEditor** control from the ToolBox to an AJAX-enabled web page.

2. Right-click the **RadEditor** control and select **Show Smart Tag**.

3. From the Smart Tag menu, select the **Enable RadEditor Dialogs** link.

4. From the Smart Tag menu, select the **Enable spell check for RadEditor** link.

> note To properly enable the spell checking examine the **Using Localization and Enabling the Spell Checking** section.

> caption Figure 2: Shows all available RadEditor Smart Tag.

![RadEditor Smart Tag menu with dialog and spell-check options](https://www.telerik.com/products/aspnet-ajax/documentation/assets/96467c5795dac56c51aa9cda1ba1221c/getting-started-smart-tags.png)

For further instructions and more information about the dialogs follow the articles in the [Dialogs section](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/dialogs/overview).

## Using Localization and Enabling the Spell Checking

1. Right-click the project and select **Add | Add ASP.NET Folder | App_GlobalResources**.

2. Copy the contents of the files located in the directory **\[Controls Installation Folder]\App_GlobalResources files** to your project **App_GlobalResources** folder.

3. In the Solution Explorer, right-click the project and select **Add | Add ASP.NET Folder | App_Data**.

4. Copy the **\RadSpell** directory to your project **App_Data** folder. The files are located in the **\[Controls Installation Folder]\App_Data**

> caption Figure 3: Shows the resulted project structure from the above steps.

![App_GlobalResources and App_Data folders configured for RadEditor](https://www.telerik.com/products/aspnet-ajax/documentation/assets/c6c306a08749538eb483904116a9bd12/getting-started-radeditor-configuration.png)

For further instructions on these matters, please follow [the Localization section](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/accessibility-and-internationalization/localization/global-resource-files) or[the Spellchecker one](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/spellchecker/overview) in the documentation.

## Configure RadEditor in the Properties Window

1. Open the RadEditor Smart Tag and select "Silk" from the **Skin** drop down list.

2. In the Properties Window for the editor set the **Content** property to `<h1>This is the title</h1> Here is the body of the content. <br /> ...and another line here`.

3. Also in the Properties Window, locate the **Snippets** property and click the ellipses to open the EditorSnippets Collection Editor. Click the Add button to create a new snippet. Set the **Name** property to "MyList" and the **Value** property to `<ol><li>One</li><li>Two</li><li>Three</li></ol>`.

   > caption Figure 4: Shows how an item is created in the EditorSnippets Collection Editor

   ![EditorSnippets collection editor with a custom list snippet](https://www.telerik.com/products/aspnet-ajax/documentation/assets/d4e24267bb9880c82a765993d229ab2a/editor-gettingstarted002.png)

4. Press **F5** to run the application. Notice that the Content is formatted as HTML. Locate the Snippets drop down button and click the "MyList" entry to add your snippet to the current location of the text cursor.

> caption Figure 5: Shows the modified RadEditor control after adding HTML content and an item into the Snippet collection.

![RadEditor displaying HTML content inserted from a custom snippet](https://www.telerik.com/products/aspnet-ajax/documentation/assets/a22a5292372dbb95bc51a5ae0a7d6e30/getting-started-radeditor-mylist.png)

## Getting Started with Adaptive Editor

If the application built is designed to be phone-optimized, you can consider using the [Phone Layout of RadEditor](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/overview). To learn more about it, you can follow the [Phone Layout Getting Started](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/getting-started) and [Phone Layout Elements Structure](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/elements-structure) articles.

## See Also

* [Set Properties](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/getting-started/set-properties)

* [Getting Started Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/managing-content/getting-and-setting-content/overview)

* [Disable RadEditor](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/editor-views-and-modes/disable-radeditor)

* [Skins](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/appearance-and-styling/skins)

* [Global Resource Files](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/accessibility-and-internationalization/localization/global-resource-files)

* [Spellchecker Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/spellchecker/overview)

* [Dialogs Introduction](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/dialogs/overview)

* [Phone Layout of RadEditor](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/overview)

* [Phone Layout Getting Started](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/getting-started)

* [Phone Layout Elements Structure](https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/mobile-support/phone-layout/elements-structure)
