Jquery textarea在文本中添加链接

jquery textarea add link in text with costum popup

本文关键字：添加 链接 文本 textarea Jquery      更新时间：2023-09-26

我有一个文本区，用户可以在那里输入一些文本，有时他们在那里使用一些html来使它看起来更好。有时这会出错，所以我试图通过添加一些带有函数的图像来简化它们。比如在<b> <i> <u> <del>标签中包装文本。这很有效。现在我想让他们添加url，这就是我卡住的地方。

我想要的:

我想要一个弹出与标题栏和url栏。在按下OK后，我希望文本出现在用户离开光标的文本区域。文本区域中的文本需要看起来像<a href="' + url + '" rel="external">' + title + '</a>。如果用户选择了一些文本，我希望它出现在弹出标题字段
  • 如果按下add link按钮，脚本需要查看文本区域中是否有选择
  • 如果有选择，脚本会记住
  • 弹出窗口打开
  • 在弹出框的标题输入中显示选择。
  • 用户填写url
  • 用户按OK键
  • 弹出窗口消失，所选文本被链接
    • 所取代
  • 链接看起来像<a href="' + url + '" rel="external">' + title + '</a>

这是我的一些代码:

    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();
    }

和小提琴

你可以这样做:

小提琴。

把你的html改成:

<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>

并将它们添加到你的javascript中:

$('#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();
}
相关文章：