CODEWITHSUNDEEP
javascriptjquery
user3602420
user3602420

Reputation: 127

jquery textarea add link in text with costum popup

I have a textarea where users can enter some text en sometimes they use a little html in there to make it look better. Sometimes this goes a wrong so I tried to make it easier for them by adding a few images with functions. Like wrapping text in <b> <i> <u> <del> tags. This works great. Only now I want them to add url's and this is where I got stuck.

What I want:

I want a popup with a title bar and a url bar. after pressing OK I want the text to appear in the textarea where the user had left his cursor. the text in the textarea needs to look like <a href="' + url + '" rel="external">' + title + '</a>. If a user selects some text i want that to appear in the popup title field.

this is some code I have: 

    function wrapAsLink(url) {
        var textArea = $('.area'),
            len = textarea.value.length,
            start = textarea.selectionStart,
            end = textarea.selectionEnd,
            sel = textarea.value.substring(start, end),
            replace = '<a href="'+url+'" rel="external">' + sel + '</a>';
        textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
        $('.area').keyup();
    }

and a fiddle

Upvotes: 2

Views: 3481

Answers (1)

Burak Ozdemir
Burak Ozdemir

Reputation: 5332

You can do something like this:

The fiddle.

Change your html as:

<div class="editor">
    <div class="toolbar">
        <span id="btnedit-bold" title="Vergedrukte text"><img src="images/bold.png" /></span>
        <span id="btnedit-italic" title="Italic text"><img src="images/italic.png" /></span>
        <span id="btnedit-underline" title="Onderstreep text"><img src="images/underline.png" /></span>
        <span id="divider">&nbsp;</span>
        <span id="btnedit-delete" title="verwijder (doorstreep) text"><img src="images/delete.png" /></span>
        <span id="divider">&nbsp;</span>
        <span id="btnedit-link" title="Insert link"><img src="images/link.png" /></span>
    </div>
    <textarea name="editor-preview" class="area" placeholder="Uw bericht"></textarea>
</div>
<p>&nbsp;</p>
<div class="editor-preview"></div>

<div id="prompt">
    <div class="prompt-background"></div>
    <div class="prompt-dialog">
        <div class="prompt-message">
            <p><b>Insert Hyperlink</b></p>
        </div>
        <form class="prompt-form">
            <p>titel</p>
            <input id="btnedit-title" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
            <p>http://example.com/</p>
            <input id="btnedit-url" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
            <button id="btnedit-ok" class="btn-orange" onClick="$('#prompt').show();">OK</button>
            <button id="btnedit-cancel" class="btn-orange" onClick="$('#prompt').hide();">cancel</button>
        </form>
    </div>
</div>

And add those to your javascript as:

$('#btnedit-bold').on("click",function(e) {
    wrapText('b');
});

$('#btnedit-italic').on("click",function(e) {
    wrapText('i');
});

$('#btnedit-underline').on("click",function(e) {
    wrapText('u');
});

$('#btnedit-delete').on("click",function(e) {
    wrapText('del');
});

$('#btnedit-link').on("click",function(e) {
    var textArea = $('.area'),
        len = textArea.val().length,
        start = textArea[0].selectionStart,
        end = textArea[0].selectionEnd,
        selectedText = textArea.val().substring(start, end);
    $('#btnedit-title').val(selectedText);
    $('#btnedit-url').val('http://');
    $('#prompt').show();
});

$('#btnedit-ok').on("click",function(e) {
    e.preventDefault();
    $('#prompt').hide();
    replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
    wrapLink(replacement);
}); 

$('#btnedit-cancel').on("click",function(e) {
    e.preventDefault();
    $('#prompt').hide();
}); 

function wrapLink(link) {
    var textArea = $('.area'),
        len = textArea.val().length,
        start = textArea[0].selectionStart,
        end = textArea[0].selectionEnd,
        selectedText = textArea.val().substring(start, end);
    textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
    $('.area').keyup();
}

Upvotes: 4

Related Questions