Chnage Font of All text in ContentArea

5 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    I'm implementing a mail for using RadEditor.

    I need to be able to switch between Html and Plain Text.

    I have a control on the page to do the switch, but I'm struggling with the code to actually update what the user sees in the editor.

    Specifically, I'm trying to implement Outlook-like functionality so that, if they select Plain Text, all the formating is removed from any existing content and the font is switched to a non-proportional one.

    I'm calling this when the format selection changes ...
    setTimeout(function ()
    {
        sender.fire('FontName', { value: 'Courier New' });
    }, 300);
    and whilst this changes the selected font, it doesn't change any existing text.

    Is there a way for me to select all of the content before calling the .fire method?

    --
    Stuart

  2.
  3. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Mar 2012 Link to this post

    Hello,

    Did you try to execute

    editor.fire("SelectAll");

    which will select the text in the content area?

    You can also control the formatting via a custom content filter. You can see this demo for more information: Custom Content Filters.

    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    Thanks Rumen.

    In the end I found I needed to do some other server-side processing at the same time, so I got the code to call this...
    function EditorClientLoad(sender, e)
    {
        var font = $find("<%=DefaultFont.ClientID %>").get_value();
        if (font == null)
        {
            font = "Arial";
        }
        setTimeout(function ()
        {
            sender.get_contentArea().style.fontFamily = font;
            sender.fire('FontName', { value: font });
        }, 10);
    }

    As I'm removing all of the formating from the content when switching to Plain Text mode, changing the style of the content area does the job.

    Now to work out how to disable all of the buttons bar Help and Spellcheck when switching to Plain Text.

    The fun just keeps on coming.

    --
    Stuart
  7. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    Incidentally,

    it would be a really good idea to have all of the publically accessible/supported commands for the .fire() method documented someplace.

    --
    Stuart
  8.
  9. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 06 Mar 2012 Link to this post

    Hello,

    Here are examples on how to fire the RadEditor's dropdowns and splitbuttons commands:

    RealFontSize command:
    var args = new Telerik.Web.UI.EditorCommandEventArgs("RealFontSize", null, "13px");
    editor.fire("RealFontSize", args);

    FontName command:
    editor.fire("FontName", { value: 'Arial'});

    FontSize command:
    editor.fire("FontSize", {value : "2"});

    FormatBlock command:
     editor.fire("FormatBlock", { value: "<h1>" });


    FormatStripper command:
    editor.fire("FormatStripper", {value : "WORD"});
    - possible values: ALL, ALL_NO_BRAKES, CSS, SPAN, FONT, WORD, WORD_ALL and WORD_NO_FONTS

    ApplyClass command:
     var objCssClass = new Object(); objCssClass.get_value = function () { return "HighLight"; } editor.fire("ApplyClass", objCssClass);

    BackColor and ForeColor commands:
     editor.fire('ForeColor', { value: "orange" });
     editor.fire('BackColor', { value: "black" });

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top