Change font color when editing.

[Marla]

Hi.

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?

[Rumen]

Hi,

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) {
            editor.fire('ForeColor', { value: "orange" });
        });
    }
</script>
<telerik:RadEditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">
<Content>dasdasd dasasd asddasdas <br/>dasdasdas dasdasdas</Content>
</telerik:RadEditor>

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.
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
http://www.quirksmode.org/dom/range_intro.html
http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

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


Best regards,
Rumen
the Telerik team