Change font color when editing.

2 posts, 0 answers
  1. Marla
    Marla avatar
    2 posts
    Member since:
    Nov 2011

    Posted 07 Nov 2011 Link to this post


    I need to load text to RadEditor from database that can be changed by user from website. The problem is that default text colour must be black, and all changes that user makes must be in red colour only. How can I achieve this? I tried to use something like

    function OnClientSelectionChange(editor, args) {
        editor.get_document().execCommand("ForeColor", false, "Red");

    But in this case font colour changes to red event when user select some part of the text with mouse or with keyboard, and that is totally wrong. I also tried to handle "keydown" event for the content area, but in this case each symbol is wrapped by span tag, so I get something like

    <span style="font: red;">r<span style="font: red;">e<span style="font: red;">s</span></span><span>

    And this is incorrect to, also, it causes problems with performance in the case of long text. Could someone please help me with this issue?
  2. Rumen
    Rumen avatar
    14459 posts

    Posted 09 Nov 2011 Link to this post


    RadEditor does not offer this functionality out-of-the box and it is up to the developer using the control to implement it.

    You can try the following code which applies the fore color when clicking in the content area:
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            var element = document.all ? editor.get_document().body : editor.get_document();
            $telerik.addExternalHandler(element, "click", function (e) {
      'ForeColor', { value: "orange" });
    <telerik:RadEditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">
    <Content>dasdasd dasasd asddasdas <br/>dasdasdas dasdasdas</Content>

    If you do not like how the code works or if there are side effects, you can try to enhance it using text ranges or implement your own separate solution using an editable DIV element (<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">sample content</div> as the editor. Once you are ready send the code and we will help you integrate it with RadEditor.

    Here is some information on the browser's text ranges:

    You can obtain the current caret position by using browser-specific methods. In fact the editor can assist you nicely here, because you can use another of its cross-browser methods:
    var range = editor.getSelection().getRange();

    This range object is specific for each browser, and its API will differ greatly, so from this point on you will need to write browser-specific code.

    You can also see the following articles which provide useful information about caret position, moving and locating the carer position:
    Mouse Cursor Position
    How to set/get caret position of a textfield in IE?
    Working with the Cursor Position.

    To obtain a reference to the editor document use editor.get_document().

    Best regards,
    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