Plans for the RichTextBox editor

11 posts, 0 answers
  1. Sodi We
    Sodi We avatar
    160 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2010 Link to this post

    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
  2. Mike
    Admin
    Mike avatar
    640 posts

    Posted 26 Apr 2010 Link to this post

    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: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.
  3. DevCraft banner
  4. Daniel Billingsley
    Daniel Billingsley avatar
    95 posts
    Member since:
    Apr 2010

    Posted 11 May 2010 Link to this post

    If the Telerik control won't have any built-in editing UI, what is it going to offer beyond the standard Microsoft one?
  5. Mike
    Admin
    Mike avatar
    640 posts

    Posted 13 May 2010 Link to this post

    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.
  6. Daniel Billingsley
    Daniel Billingsley avatar
    95 posts
    Member since:
    Apr 2010

    Posted 13 May 2010 Link to this post

    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.
  7. Mike
    Admin
    Mike avatar
    640 posts

    Posted 14 May 2010 Link to this post

    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.
  8. Glenn Morton
    Glenn Morton avatar
    4 posts
    Member since:
    Feb 2010

    Posted 14 May 2010 Link to this post

    Great idea Daniel - I too would love to see some way of quickly getting up and running with a rich text editor.
  9. Sodi We
    Sodi We avatar
    160 posts
    Member since:
    Apr 2010

    Posted 15 May 2010 Link to this post

    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.
  10. Mike
    Admin
    Mike avatar
    640 posts

    Posted 18 May 2010 Link to this post

    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.
  11. p k
    p k avatar
    6 posts
    Member since:
    Dec 2009

    Posted 11 Nov 2010 Link to this post

    Hi,
    I want to implement small word like editor,

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

    Purushottam
  12. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 12 Nov 2010 Link to this post

    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:

     

    Greetings,
    Iva
    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
Back to Top
DevCraft banner