0

I have this code:

<textarea><b>test</b></textrea>

It displays the raw HTML code. Instead, I would like it to simply display bold text.

How can I achieve that?

mingos
  • 23,778
  • 12
  • 70
  • 107
xujinliang
  • 77
  • 1
  • 1
  • 4
  • Could you possibly reword your question, it seems like a jumbled mess at the moment... – FarligOpptreden Feb 14 '12 at 09:05
  • 1
    @Devjosh guess he just copypasted random words to fill up some contect, other wise the same error comes if the question is a small one – footy Feb 14 '12 at 09:07
  • @footy hmm now i see there are changes in the validations when you post a question but what is this mess that xujinliang pasted in question – Devjosh Feb 14 '12 at 09:09
  • @Devjosh yeh I loled :P I submitted an edit for it. But the question itself is very unclear to say the least. I dont even see a question in there. – footy Feb 14 '12 at 09:15
  • 1
    @footy, it feels bad when people ask for help and don't even bothered to make their question clear and with such a lazy and irresponsible way – Devjosh Feb 14 '12 at 09:19
  • @footy i too noticed that now. he is not here for last 25 minutes – Devjosh Feb 14 '12 at 09:23
  • 5
    I'm pretty sure the question should be "I want bold text in a textarea. But with my first code the text in the textarea is `test`. How can I make the textarea display the 'bold' effect?" – Martin Hennings Feb 14 '12 at 09:25

2 Answers2

10

If you want the textarea to display bold text, you can do that via css style attribute:

<textarea style="font-weight: bold">test-text</textarea>

This makes the textarea display all text bold, as it would be in <b>text</b>.

However, this affects all text in the textarea. There is no way to show only one word in bold.

Martin Hennings
  • 16,418
  • 9
  • 48
  • 68
  • @ martin OP had better clarified his question first anyways it will be good if it helps OP though – Devjosh Feb 14 '12 at 09:34
  • @Devjosh You're right, but I don't believe the OP will read, understand and follow the comments to the original question right now, but rather will be frustrated. Getting help and not only being downvoted and laughed at may turn his attention to the problem of his bad phrasing, too. – Martin Hennings Feb 14 '12 at 09:38
  • your reason seems right. that's great then :) – Devjosh Feb 14 '12 at 09:40
8

In order to display styled HTML instead of the pure HTML code inside a textarea, you need a JavaScript WYSIWYG editor. You can choose from many different ones, I can think of two right now: CKEditor and TinyMCE, though you can find many more. Please refer to the documentation of each one to learn about how to integrate it in your application. Read the information on their websites to decide which one suits you best.

Just to let you have a quick start, here's an example of how to easily integrate the ones I mention.

CKEditor

First, place the downloaded CKEditor package in your application's document root, so that you can access the file /ckeditor/ckeditor.js.

On the page with the textarea, add this code:

<script src="/ckeditor/ckeditor.js"></script>
<script>
    window.onload = function () {
        CKEDITOR.replaceAll('wysiwyg');
    };
</script>

Finally, make sure the textarea in question has the wysiwyg class:

<textarea class="wysiwyg"><strong>test</strong></textarea>

TinyMCE

Again, download the package and put it somewhere in the docroot, so that the file /tinymce/tiny_mce.js is accessible.

Add this piece of code in the file containing the textarea:

<script src="/tinymce/tiny_mce.js"></script>
<script>
    window.onload = function () {
        tinyMCE.init({
            mode: "textareas"
        });
    };
</script>

If you've set everything up correctly, you should get a WYSIWYG editor instead of the textarea, displaying all your styles.

mingos
  • 23,778
  • 12
  • 70
  • 107