Friday 6 May 2011

DotNetNuke Telerik Editor ToolBars

Each DotNetNuke developer can easy add RichEditor to the project. All what you need is to add control to your .ascx file, like this:


<%@ Register TagPrefix="dnn" TagName="TextEditor" Src="~/controls/TextEditor.ascx" %>

<dnn:TextEditor runat="server" id="tbFirst" DefaultMode="BASIC"></dnn:TextEditor>
<dnn:TextEditor runat="server" id="tbSecond" DefaultMode="RICH"></dnn:TextEditor>


This code adds two  RichEditors. One like simple textbox (DefaultMode="BASIC") and another fully WYSIWYG . RichEditor with WYSIWYG looks like this:

This is great! Users like it to use. It has a lot of ToolBars. Control provides very good functionality. But sometimes it needs to remove some ToolBars. So how to do this in the DotNetNuke module?

First of all we should know Configuration for Telerik RichEditor for DotNetNuke locates in the folder "Providers/HtmlEditorProviders/Telerik/Config/". There are 2 configurations by default in this folder: ConfigDefault.xml and ConfigDocumented.xml. All instances of RichEditors at DotNetNuke portals use ConfigDefault.xml by default. Also at the same folder we can find ToolBars configurations, for example ToolsDefault.xml. There are 4 steps to modify set of ToolBars for Telerik RichEditor:

  1. Go to the Providers/HtmlEditorProviders/Telerik/Config and make a copy of ConfigDefault.xml to ConfigDefaultMinimal.xml.
  2. Go to the Providers/HtmlEditorProviders/Telerik/Config and make a copy of ToolsDefault.xml to ToolsDefaultMinimal.xml. This file contains list of toolbars you will use for your control. It is very easy to config. Just open it for edit and you will see.
  3. Add one more property to the ConfigDefaultMinimal.xml. This is ToolsFile property. This property defines File with configuration for ToolBars. Our modified configuration should look like this:
    <configuration>
    <property name="Skin">Vista</property>
    <property name="EnableResize">true</property>
    <!-- ....there are other settings...-->
    <property name="TemplateManager.MaxUploadFileSize">4194304</property>
    <property name="ToolsFile">~/Providers/HtmlEditorProviders/Telerik/Config/ToolsDefaultMinimal.xml</property>
    </configuration>
  4. On PageLoad event add this code:

    DotNetNuke.UI.UserControls.TextEditor objTextEditor =
      (DotNetNuke.UI.UserControls.TextEditor) tbSecond;
    DotNetNuke.HtmlEditor.TelerikEditorProvider.EditorProvider objProvider =  

      (DotNetNuke.HtmlEditor.TelerikEditorProvider.EditorProvider) objTextEditor.RichText;
    objProvider.ConfigFile =
      "~/Providers/HtmlEditorProviders/Telerik/Config/ConfigDefaultMinimal.xml";
    //or also can be assigned directly

    objProvider.ToolsFile =
      "~/Providers/HtmlEditorProviders/Telerik/Config/ToolsDefaultCopy.xml";

    This code loads configuration for an instance of TextEditor from the file we have made.
Now your TextEditor should look like this (depends on your ToolBars configuration):

Sure, i would like to recommend to move your configuration to the Portals/0 folder or at least DesktopModules/YourModule. Then you can create these files on module installation.

Hope this helps!

PS: Examples and properties of Config.xml for Telerik RadEditor are here.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.