Ensuring inline font styling is always added to text

2 posts, 0 answers
  1. Tom
    Tom avatar
    13 posts
    Member since:
    Aug 2015

    Posted 15 Sep 2017 Link to this post


    I have a bit of a unique situation that I am hoping to get some help with. We use the editor control to create HTML that gets saved and used elsewhere. Because of this, it's really important that every element has a font-family and font-size style associated with it in the html. Is there any way I can ensure this happens?

    For example, when I press enter and start typing, the html produced will be <p>some text</p>. Is there any way I can make whatever font is specified in my toolbar drop downs automatically be applied? Such as: <span style="font-family: Arial; font-size: 16pt;">some text</span>.

    I do execute some javascript when the editor loads to set the font properties intially:

    editor.fire('FontName', { value: 'Arial' });
    editor.fire('RealFontSize', { value: '9pt' });

    This gives me a proper span when the editor is blank, but the editor doesn't always keep those properties for new lines are entered which results in some mismatched HTML when I need to use it elsewhere.

    Thank you for your help!

  2. Rumen
    Rumen avatar
    14317 posts

    Posted 20 Sep 2017 Link to this post

    Hi Tom,

    If the solution which sets the default font with a span tag wrapped does not cover all scenarios:

    function OnClientLoad(editor, args)
            //fire the FontName and FontSize commands
            editor.fire('FontName', { value: 'Arial' });
             editor.fire('RealFontSize', { value: '9pt' });
        }, 0);
    <telerik:RadEditor id="RadEditor1" runat="server" OnClientLoad="OnClientLoad" />

    you can attach to the OnClientSubmit event, obtain the produced content editor.get_html(true) and programmatically add the desired font styles to the desired elements that do not contain font applied. You can do the same server side after obtaining the content as a string via the RadEditor1.Content property.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top