I'm trying to create a couple of buttons above a textarea to insert some HTML code -- a VERY poor-man's HTML editor. I have a couple of INPUT elements, and I'm using jQuery to set a click handler that will call's jQuery's append() or html() or text() functions.

The handler fires, it shows a debug alert(), but the text I'm trying to append doesn't show up in the textarea. When I inspect the textarea in Firebug, I see the text I'm appending as a child of the textarea -- but it's dimmed, as when an element's style is set to display:none. But Firebug's CSS inspector doesn't show any change to the display or visibility properties.

When I set the click handler to 'append()', and then click multiple times, in Firebug I see the text being added over and over again -- but each new chunk is still invisible. If I choose 'Edit HTML' in Firebug and then type some chars next to the appended text, the entire text block -- the text added by jQuery and the stuff I added in Firebug -- suddenly appear.

This also happens if I don't use a click handler, but call my append function using an inline handler like onclick="javascript:insert('bold');"

Anyone have any idea why the appended text is not displayed?

Here's the relevant code:

The HTML:

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

The Javascript:

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

I'm trying to create a couple of buttons above a textarea to insert some HTML code -- a VERY poor-man's HTML editor. I have a couple of INPUT elements, and I'm using jQuery to set a click handler that will call's jQuery's append() or html() or text() functions.

The handler fires, it shows a debug alert(), but the text I'm trying to append doesn't show up in the textarea. When I inspect the textarea in Firebug, I see the text I'm appending as a child of the textarea -- but it's dimmed, as when an element's style is set to display:none. But Firebug's CSS inspector doesn't show any change to the display or visibility properties.

When I set the click handler to 'append()', and then click multiple times, in Firebug I see the text being added over and over again -- but each new chunk is still invisible. If I choose 'Edit HTML' in Firebug and then type some chars next to the appended text, the entire text block -- the text added by jQuery and the stuff I added in Firebug -- suddenly appear.

This also happens if I don't use a click handler, but call my append function using an inline handler like onclick="javascript:insert('bold');"

Anyone have any idea why the appended text is not displayed?

Here's the relevant code:

The HTML:

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

The Javascript:

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

• javascript
• jquery
• append

• Clarification: the <b> tags don't need to display as bold in the textarea. The contents of the textarea will be injected into an email, whihc will render the <b> as bold. Sorry for the distraction -- tho inserting HTML is the point of these buttons, the problem is not that the text doesn't render in the textarea as bold, but that it doesn't display in the textarea at all. I'll try some of the suggestions in an hour or so and tell y'all what worked. Thanks for the responses! – Val Commented Aug 26, 2009 at 14:50

5 Answers 5

I would guess that jQuery is trying to append HTML DOM elements to the textarea.

Try using the val method to get and set the textarea's value, like this:

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

The basic problem is that you can't put HTML inside a <textarea>. In fact, you can't append HTML elements to one at all. You could use the .val() method to change the text shown inside, but that won't make it bold. That will just make it have <b> showing as part of the text.

An off-the-shelf WYSIWYG editor like TinyMCE is free and easy to implement. Rather than reinvent the wheel (which is a lot harder than it might look), try an existing wheel out.

SLaks and VoteyDisciple are correct. You're usage of append is faulty as you are perceiving it as a string function.

From http://docs.jquery./Manipulation/append

Append content to the inside of every matched element. This operation is the best way to insert elements inside, at the end, of all matched elements. It is similar to doing an appendChild to all the specified elements, adding them into the document.

Reinventing the wheel on this one is likely more headache than its worth unless this is an attempt to create a superior, peting product or for your own experimentation.

Also, I would shy away from use of obtrusive JavaScript as you have shown in your example with onclick='javascript:insert("bold")' embedded in the input element. Instead, you'll have a more elegant solution with something like the following:

HTML

<input type="button" value="B" class="editor-mand" >
<input type="button" value="I" class="editor-mand" >
<input type="button" value="U" class="editor-mand" >

JavaScript (not tested)

$(document).ready(function() {
  var textarea = $('#PersonalGreeting')
  $(".editor-mand").each(function(i, node) {
    textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
  });
});

If the main issue is the textarea not being visible, I would try this:

$('#PersonalGreeting').append('<b>bold text here</b>').show();

Might be worth a shot.

edit: In the vain of not trying to reinvent the wheel, I've had success with WYMEditor

You could do this:

 $('#PersonalGreeting').append('[b]bold text here[/b]');

But that won't actually render the text as bold. To be honest I'm not actually sure how to render text as bold inside a textarea, I imainge some js trickery.