jquery textarea在带有自定义弹出窗口的文本中添加链接

Question

我有一个文本区域，用户可以在其中输入一些文本，有时他们会在其中使用一些 html 以使其看起来更好。有时这会出错，所以我尝试通过添加一些具有功能的图像来让他们更容易。就像在 <b> <i> <u> <del> 标签中换行一样。这很好用。只是现在我希望他们添加 url，这就是我卡住的地方。

我想要什么：

我想要一个带有标题栏和网址栏的弹出窗口。按OK 后，我希望文本出现在用户离开光标的文本区域中。 textarea 中的文本需要看起来像<a href="' + url + '" rel="external">' + title + '</a>。如果用户选择了一些文本，我希望它出现在弹出标题字段中。

• 如果按下add link 按钮，脚本需要查看文本区域中是否有选择
• 如果有选择，脚本会记住这一点
• 弹出窗口打开
• 在弹出窗口的标题输入中出现选择。
• 用户填写url
• 用户按下确定按钮
• 弹出窗口消失，所选文本被链接替换
• 链接看起来像<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();
    }

还有一个fiddle

Answer 1

你可以这样做：

The fiddle.

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