How display links without showing anchor tags in a prefilled textarea?

Question

When my users find a great idea on my site, I want them to be able to click an "Add" button next to the idea, which opens a popup with a textarea that is pre-filled with that idea's content. The user can then edit the idea content before adding it to their to do list.

I've got this jQuery function working, but if the idea content has links, the pre-filled textarea is filled with ugly anchor tags. How can I display the links as HTML instead of displaying the anchor tags?

Here's my jQuery code:

$(_this.attr('href')).find('textarea').val(_this.closest('li').find('.textarea-content').html());

Thanks.

Answer 1

You cant display links in textareas.

Instead use an HTML area available out there like TINYMCE and use it in simple mode in case it's size is problem to u.

Answer 2

You can't have links in a <textarea> it just isn't designed for this, you want some sort of WSYWIG editor if that's what you're after. To name a few:

• TinyMCE
• CKEditor

This list is still a pretty decent one of rich text editors, including minimal ones which seems to be what you're after.

Answer 3

You might want to think twice before allowing users to enter HTML (especially anchor elements) directly onto your site (especially if this will be seen by other people). Instead, you may want to look at a markdown library like the one employed by StackOverflow.

Answer 4

I would use .text() instead of .html(), if i understand the question correctly..

Answer 5

Assuming that you're trying to post a list showing the href of each added link, this works:

$(document).ready(
    function(){
     $('.add').click(
         function(){
             var txt = $(this).prev('a').attr('href');
             var curTxt = $('#linkStore').val();
             $('#linkStore').val(txt + '\n' + curTxt);
         }
         );
    }
    );​

Though, obviously, it's just text and non-clickable.

There's a demo, of sorts, over at JS Fiddle.