1

I'm kind of new to JQuery, and I'm in a very difficult position right now. I need to make the user free to write in a paragraph, and then change the text color as he wish, but only a selected text from his paragraph, like text editing in a browser. Here are my files :
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-5589-1" />
   <link rel="stylesheet" href="style_ext.css">
   <title>Editable Paragraph</title>
   </head>
   <body>
   <p contenteditable="true" class="par" id="txt">This is an editable paragraph.</p>
   <center>
           <button type="button" id="redText">Color text in red</button>
   </center>
   <center>
           <button type="button" id="blueText">Color text in blue</button>
   </center>
           <script type="text/javascript" src="js/jquery.js"></script>
           <script type="text/javascript" src="js/pushred.js"></script>
   </body>
</html>

CSS

.par {
    width: 300px;
    height: 300px;
    border: 2px solid #A3A3A3
}

JS

$('#redText').click(function() {
    change_color('red');
});


$('#blueText').click(function() {
    change_color('blue');
});

function change_color(theColor) {
    //What should I put here to make any selected text change the color ?
}

Important information : i don't want the entire paragraph to change, only a segment, a selection, like in text editors

Avulsed
  • 11
  • 3
  • I googled up http://api.jquery.com/select/ . It says > This event is limited to `` fields and ` – MKaama May 23 '14 at 16:06
  • Yes I found the same thing, but what i want is not only retrieving the text, I want to apply a style to it, bold, underlining, etc... and it shouldn't be an input, because i'll be sending 5 or 6 paragraphs as a plain HTML, in other words, i want to make a simple text editor. – Avulsed May 23 '14 at 16:36

1 Answers1

-1
$('#redText').click(function() {
    $(this).css('color', 'red');
};
adeptCOGnition
  • 43
  • 5