Question

我有一个textarea，用户可以在其中输入一些文本，有时他们会在那里使用一些小的HTML来使它看起来更好。有时这是错误的所以我试图通过添加一些带有功能的图像来使它们更容易。就像在<b> <i> <u> <del>标签中包装文字一样。这非常有效。只是现在我想让他们添加网址，这就是我被卡住的地方。

我想要的是什么：

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

如果按下add link按钮，脚本需要查看textarea中是否有选择
如果有选择，则脚本会记住
弹出窗口打开
在弹出窗口的标题输入中显示选择。
用户填写网址
用户按下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();
    }

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

jquery textarea使用自定义弹出窗口添加文本链接

1 个答案: