Plans for the RichTextBox editor

[Licenses]

Hi,

I was wondering what the plans are about the RichTextBox for Telerik. We are looking for a RichTextBox with editing capabilities, but without the overkill of an entire Word-like interface as seen in the Telerik Demo. So preferably a customizable editor would be great: one where the developer can choose which buttons to activate, etc. Are there any plans in the near future, or would you suggest that we implement this ourselves?

To clarify our requirements further: what we need for our application resembles the Microsoft sample application found here.

Thanks,
Sodi

[Mike]

Hi Sodi,

Thank you for being interested in out new control and for the great question.
Actually RadRichTextBox does not provide any editing UI out of the box. Similar to MS RichTextBox you may add any kind of UI wich should call the APIs of RadRichTextBox. In out demo application we have used RadRibbonBar to resemble the Office UI. In your application you can use a similar approach and add/remove any buttons/commands depending on the features you need. Here is a sample of using RadRichTextBox with ribbon UI with just a few commands:

XAML:

<UserControl x:Class="DocumentationDemos.RibbonEditorDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:te="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:telerikRtb="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Documents"
    xmlns:telerikDoc="clr-namespace:Telerik.Windows.Documents.Model;assembly=Telerik.Windows.Documents"
    xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"

    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" Loaded="UserControl_Loaded">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <telerikRibbonBar:RadRibbonBar x:Name="radRibbonBar1" ApplicationName="Editor Demo" Title="Document1">
            <telerikRibbonBar:RadRibbonTab Header="Home">
                <telerikRibbonBar:RadRibbonGroup Header="Formatting" telerikRibbonBar:ScreenTip.Title="Formatting"  telerikRibbonBar:ScreenTip.Description="Show the Font dialog box.">
                    <telerikRibbonBar:RadOrderedWrapPanel>
                        <StackPanel Orientation="Horizontal">
                            <telerikRibbonBar:RadButtonGroup>
                                <telerikRibbonBar:RadRibbonToggleButton x:Name="Bold" Content="B"  Click="Bold_Click"  telerikRibbonBar:ScreenTip.Title="Bold" telerikRibbonBar:ScreenTip.Description="Make the selected text bold." />
                                <telerikRibbonBar:RadRibbonToggleButton x:Name="Italic" Content="I" Click="Italic_Click" telerikRibbonBar:ScreenTip.Title="Italic" telerikRibbonBar:ScreenTip.Description="Italicize the selected text." />
                                <telerikRibbonBar:RadRibbonToggleButton x:Name="Underline" Content="U" Click="Underline_Click" telerikRibbonBar:ScreenTip.Title="Underline" telerikRibbonBar:ScreenTip.Description="Underline the selected text." />
                            </telerikRibbonBar:RadButtonGroup>
                        </StackPanel>
                    </telerikRibbonBar:RadOrderedWrapPanel>
                </telerikRibbonBar:RadRibbonGroup>
            </telerikRibbonBar:RadRibbonTab>
        </telerikRibbonBar:RadRibbonBar>
        <telerikRtb:RadRichTextBox Grid.Row="1" x:Name="radRtb"
                                  CurrentSpanStyleChanged="radRtb_CurrentSpanStyleChanged">
            <telerikRtb:RadRichTextBox.Document>
                <telerikDoc:RadDocument LayoutMode="Paged" ParagraphDefaultSpacingAfter="0" SectionDefaultPageMargin="15, 15, 15, 15" PageViewMargin="5, 5" />
            </telerikRtb:RadRichTextBox.Document>
        </telerikRtb:RadRichTextBox>
    </Grid>
</UserControl>

C#:

public partial class RibbonEditorDemo : UserControl
    {
        public RibbonEditorDemo()
        {
            StyleManager.ApplicationTheme = new Office_BlueTheme();
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            this.radRtb.Document.DefaultPageLayoutSettings.Width = 200;
            this.radRtb.Document.DefaultPageLayoutSettings.Height = 300;
        }

        private void Bold_Click(object sender, RoutedEventArgs e)
        {
            this.radRtb.ToggleBold();
        }

        private void Italic_Click(object sender, RoutedEventArgs e)
        {
            this.radRtb.ToggleItalic();
        }

        private void Underline_Click(object sender, RoutedEventArgs e)
        {
            this.radRtb.ToggleUnderline();
        }

        private void radRtb_CurrentSpanStyleChanged(object sender, EventArgs e)
        {
            var currRtbStyle = this.radRtb.CurrentSpanStyle;
            this.Bold.IsChecked = currRtbStyle.FontWeight == FontWeights.Bold;
            this.Italic.IsChecked = currRtbStyle.FontStyle == FontStyles.Italic;
            this.Underline.IsChecked = currRtbStyle.Underline;
        }
    }

To compile the code in an application you would need references to the following telerik dlls:
Telerik.Windows.Documents
Telerik.Windows.Controls
Telerik.Windows.Controls.Input
Telerik.Windows.Controls.Navigation
Telerik.Windows.Controls.RibbonBar
Telerik.Windows.Controls.Office_Blue

One of our goals in for the future versions is to provide a very easy approach to adding and binding editor UI and further customization to tune it up for any scenario.

Let me know if you have more questions.

Regards,
Mike
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Daniel Billingsley]

If the Telerik control won't have any built-in editing UI, what is it going to offer beyond the standard Microsoft one?

[Mike]

Hi Daniel Billingsley,

Even though RadRichTextBox will not have its own editing UI we will make sure you can "attach" Ribbon UI in just a few clicks in designer or with a couple of lines of code in the near future.

We are considering this because RadRichTextBox, similar to the MS one, should be able to take part in any scenarios requiring text input, including one with no editing UI or totally different UI then what Office ribbon or toolbars can provide. This also makes RadRichTextBox lighter in terms of assembly size, memory footprint and with better performance.

As to features compared to MS RichTextBox, the "rad" version has already advantages, like support for paged view, richer document structure and document element properties and much more formatting options, APIs to control caret position, selection, multi-region selection, commands and more. We are also planning to add much more functionality and various import/export formats in the future will will make RadRichTextBox even more valuable than that standard one.

Let us know if you are still concerned about the UI binding or if you have any suggestions about the functionality you would need in RadRichTextBox.

Greetings,
Mike
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Daniel Billingsley]

Thanks for the reply.

It sounds like you're building a pretty nice component.

While I understand there are cases where the editing UI won't be needed, I think the majority of the time we're looking for a control that is simply one line of xaml and provides full editing "out of the box".  Otherwise, everyone one of us is going to build our own user control around the RichTextBox.  As far as saving code and staying lightweight, since we'll all need an editing UI at some point anyway, all we've really done is just moved code from the component assembly into the main xap file.

It seems to me to make more sense to have a full control where the editing UI can be switched off as an option rather than requiring that every developer build an editing UI.

Or perhaps you could follow the model like your color pickers, where there are actually a few controls build around the same technology.  So, in this case you might have a RadRichTextBox and a RadRichTextEditor.

[Mike]

Thank you for the feedback, Daniel.
You do have a point and we will conciser introducing a new control or simply an easier approach that wraps UI and RadRichTextBox with all editing capabilities enabled, that can be used easier in cases similar to yours.
Write back if you have any other suggestions.

Greetings,
Mike
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Glenn Morton]

Great idea Daniel - I too would love to see some way of quickly getting up and running with a rich text editor.

[Licenses]

I would just like to say I concur with Daniel. I think most people are looking for a editor they can use rather quickly, without programming all the "couple-code" to tie the UI controls with the editor.

In earlier projects we've used TinyMCE. A very easy to use editor. Developers can just choose which commands need to be available to the end user, no "couple-code" needed.

But in the meantime if we want to use a rich text editor, we will have to write the "couple-code" ourselves.

[Mike]

Hi guys,

Indeed we are planning to introduce an easy approach to add editor to your application without writing any "coupling code"  for the UI and RadRichTextBox. Thanks for the feedback,

Greetings,
Mike
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[p k]

Hi,
I want to implement small word like editor,

How to apply the selected Font from dropdown in the rich text box?

Purushottam

[Iva Toteva]

Hello p k,

The best way to change the Font of RadRichTextBox is using the command that it exposes - ChangeFontFamilyCommand.

You may have noticed, but we have a demo of a Word-like editor at  http://demos.telerik.com/silverlight/#RichTextBox/MSWord. You can see the code used to create it by clicking View Code in the top right corner. It uses RadRichTextBoxRibbonUI control, which is especially designed for RadRichTextBox and is by far the easiest way to add UI for your scenario .

 We have chosen to implement the command binding logic in XAML (MsWordExample.xaml file). The DataContext of RadRichTextBoxRibbonUI is bound to the instance of RadRichTextBox (Path=Commands), the CommandParameter property of RadComboBox is bound to the selected item and the attached property telerik:RadRichTextBoxRibbonUI.RichTextCommand of RadComboBox is bound to ChangeFontFamilyCommand.

You can also use the method which the API exposes and accomplish the same in code-behind, when handling the SelectionChanged event of RadComboBox for example.

string fontFamily = ((sender as RadRibbonComboBox).SelectedItem as RadRibbonComboBoxItem).Tag as string;
this.radRichTextBox.ChangeFontFamilyCommand(new FontFamily(fontFamily));

 Try the approach that you find most suitable in your case and get back to us if you meet any difficulties. You can refer to the following help articles as well:

• RadRichTextBoxRibbonUI
• Customize document using API
• API methods
• Commands

 

Greetings,
Iva
the Telerik team

[Fahad]

Hi, Just need to know if there is any progress in introducing a new lightweight control in place of RadRichTextBox... I have a situation where I need to use this control as a Text Area on the page. Its a listbox and every item contains a TextArea.. the list box can have 200 items at a time..The issue what I am getting is that on Loading such a big list it tends to throw "out of memory" exception. Is there any way I can get through such issue... Please help

... I want to use this control as it can load the spell checker and this is one of the prime reason we have used this control. 

[Tanya]

Hello Fahad,

I tested a similar scenario and just replied in the support ticket your colleague Andy submitted. Would you mind to continue our conversation there? This thread concerns a different topic and in the public forums we have restrictions about the attachments.

Regards,
Tanya
Progress Telerik