By Lee Sykes
August 2010
In this tutorial we demonstrate how to configure and customize the Telerik RADEditor.
There are many functions available in the Telerik RADEditor which can be customized, these include:
Using Paragraph tags instead of Break tags, strip formatting when pasting content, changing the spell check options, changing the image manager file type settings, customizing which buttons and toolbars to display, and configuring how the editor displays content so that it matches the styling of your skin using a custom CSS file etc.
The Telerik RAD Editor also allows you to easily apply CSS classes to the HTML tags, such as the paragraph tags. This allows you to easily style the text and image content. You can configure your own CSS classes to be displayed in a drop down list in the Telerik RAD Editor and this allows you to easily apply a CSS class to the content in the editor without the need to use HTML view. This is a powerful and quick method for styling the content in the editor.
We walk you through step by step all of these various configuration options available for the Telerik RADEditor.
The videos contain:
Video 1 - Introduction, Creating a Custom Configuration File
- Introduction
- How to find and view the Telerik RAD editor configuration files
- Explanation of the two different types of configuration files
- How to create a custom configuration file
- Instructing the editor to use the new custom configuration file by editing the web.config file
- Locating and editing the correct section of code to change the default editor configuration file
- Explanation of the configuration file structure and overview of available settings
- Skin, Enable Resize, Auto Resize Height, Strip Formatting on Paste, Content Filters, Edit Modes
Time Length: 9min 28secs
Video 2 - Overview of Editor Settings and Creating a New Toolbar Configuration File
- How to instruct the Telerik RAD editor to use paragraph tags rather than break tags
- New Line Break
- Changing the spell check settings
- How to change the image manager file type settings
- Image manager search patterns
- Disabling the image editor
- How to change the maximum upload file sizes for media, images, documents, flash and templates
- How to implement the UseSharedToolBar option
- How to check if the editor is using the new configuration file
- Inserting a break tag after instructing the editor to use paragraph tags
- Creating a new version of ToolsDefault.xml
- Overview of the ToolsDefault.xml file
Time Length: 8min 35secs
Video 3 - Customising the Telerik RAD Toolbar and Installing an Example Skin
- Demonstration of toolbar groups and separators
- How to disable and remove specific buttons from the Telerik RAD editor
- Removing the select all, cut, copy and paste buttons
- How to remove the insert groupbox, date and time buttons
- Removing the font name and size drop down lists
- Removing the foreground and background color buttons
- How to remove the insert snippet and absolute position options
- How to change the tools file reference in the DotNetNuke web.config file
- How to install the Lazy Days skin and the House Menu skin object
- Applying the Lazy Days skin to a test page
Time Length: 12min 14secs
Video 4 - Configuring How the Editor Displays Content
- How to change the editor background and text color to match the skin color scheme
- Creating a backup of the skin.css file for use within the Telerik RAD editor
- How to create the Telerik RAD Editor CSS file
- Where to place the Telerik RAD Editor CSS file
- Removing code from the new CSS file that is not required in the editor
- How to instruct the editor to use the new CSS file
- Correcting the text alignment to match the Lazy Days skin
- Removing the skin background image so it is not displayed in the editor
Time Length: 11min 26secs
Video 5 - Adding CSS Styles to the RAD Editor - Good Practice
- How to create new styles for use in the apply CSS class drop down list
- Adding and removing CSS class names in the ToolsDefault.xml file from the skin.css file
- Demonstration of the new CSS classes on selected text in the RAD editor
- How to assign a class to text in the RAD editor
- How to remove all assigned CSS classes from selected text
- Adding alignment classes to the telerik RAD editor from the skin.css file
Time Length: 10min 17secs
Video 6 - Adding CSS Styles to Wrap Text Around Images
- How to add a clear class to the editor to clear any float classes
- Adding a blockquote go class to the RAD editor
- Demonstration of the new float classes in use
- How to wrap text around an image
- Explanation of the Clear Class option
- Demonstration of the clear float class in use
- How to use the EditorOveride.css file to override any classes from the skin.css file
- Overriding the background color and background image
Time Length: 9min 55secs
Total Time Length: 61min 58secs
Comments