locked
Change colour of selected text RRS feed

  • Question

  • Hi!

    What's the best way to change colour of the selected text in a document?

    Currently I'm using a div with contenteditable="true" as the textarea and surrounding the selected text with a formated span element. Although there are some issues with this.

    The first problem is that, apparently, each time you create a new row when typing in the div, that creates a div of the new row instead of just creating a br tag. So each row is a div. Therefore you can not format text spanning over several rows.

    The other problem is that when i press the button supposed to change the text colour, it deselects the text before I can manage the selection.

    Is there a better way to approach this problem? If not, how do i resolve the problems above?

    PS. I should really start learning C# or something

    Saturday, January 4, 2014 1:39 PM

Answers

  • This is not quite what i wanted but i can understand that you misinterpreted. What I wanted was to change the text color permanently. You may want to select some text, change color of it and then keep typing some other text. I actually managed to do it by listening to when the user pressed enter, catch it and use a <br> tag instead. I also prevented the default action on mousedown when clicking the color changeing button.
    • Marked as answer by SiXoS Monday, January 6, 2014 12:08 PM
    Monday, January 6, 2014 12:07 PM

All replies

  • Hi SiXoS,

    You should be able to use execCommand() to change the color of selected text. See a sample here: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/execCommand_CreateLink.htm, select some text first and click the button to add hyperlink for these text, you should be able to find the color of the text has been changed to red, and I think this is the thing what you need.

    Or there is a much easier way, change the CSS for selected text by edit ui-dark/white.css line 2607:

    ::selection {
        background-color: rgb(87, 41, 193);
        color: rgb(255, 255, 255);
    }
    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Monday, January 6, 2014 7:21 AM
    Moderator
  • This is not quite what i wanted but i can understand that you misinterpreted. What I wanted was to change the text color permanently. You may want to select some text, change color of it and then keep typing some other text. I actually managed to do it by listening to when the user pressed enter, catch it and use a <br> tag instead. I also prevented the default action on mousedown when clicking the color changeing button.
    • Marked as answer by SiXoS Monday, January 6, 2014 12:08 PM
    Monday, January 6, 2014 12:07 PM