2

Is there a way to set part of the text of the textarea with style. For example if i have a text area with this value:

Hi, how are you

I'd want this :

hi how are you

Setting the words that I want in bold and not all the values wrote in the text area. I would like do it with jQuery maybe a plugin or something.

My text area:

<textarea id="txtMessageFields" cols="20" rows="2"></textarea>
orftz
  • 1,138
  • 13
  • 22
Jorge
  • 17,896
  • 19
  • 80
  • 126

4 Answers4

5

You can use a WYSIWYG HTML editor for this purpose, like CKEditor or TinyMCE.

For example, with CKEditor's jQuery interface this is as easy as:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
     $(document.ready(function () {
         $('#txtMessageFields').ckeditor();
     });
</script>

from CKEditor jQuery Adapter Guide

Take a look at the configuration options to only enable the functionalities you need.

kapa
  • 77,694
  • 21
  • 158
  • 175
  • And for all the fanciness of those editors, they boil down to taking a block element and settings its "contentEditable" attribute to true, enabling realtime changes to the block's contents. – Marc B May 30 '11 at 14:53
  • 1
    @Marc This is only one option, if you don't want to reinvent the wheel. Looks a bit overkill for only using **Bold**, but it is unclear to me whether the OP only needs this functionality. – kapa May 30 '11 at 14:58
  • 1
    Looks suspiciously like you're using duplicate `id`s there, with `#txtMessageFields`. That's invalid HTML. – Eric May 30 '11 at 15:09
1

Try THIS its what you want. See the demo here

Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
1

A <textarea> element can only hold plain text:

As far as I know, all JavaScript WYSIWYG editors use a regular DOM node (an iframe or a div) and use regular HTML/CSS to get visual styles. You could write some code to dynamically replace your textarea but I assume it's a form field in the first place because it needs to be editable. If so, I suggest you pick a third-party editor. Here's quite a comprehensive list:

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
1

As wrote bazmegakapa, you must use a WYSIWYG editor. From my experience, the best is TinyMCE, which includes a special package if you use jQuery (TinyMCE jQuery package).

raz0r999
  • 43
  • 8