Javascript jquery textarea使用costum弹出窗口在文本中添加链接

我有一个文本区，用户可以在其中输入一些文本，有时他们会在其中使用一些html来让它看起来更好。有时这会出错，所以我尝试通过添加一些带有函数的图像来让他们更容易。类似于在

标记中包装文本。这很有效。只是现在我想让他们添加url，这就是我被卡住的地方

我想要的是：

我想要一个带有标题栏和url栏的弹出窗口。按

OK

后，我希望文本显示在用户离开光标的文本区域中。文本区域中的文本需要看起来像

。如果用户选择某个文本，我希望该文本显示在弹出标题字段中

• 如果按下

  添加链接

  按钮，脚本需要查看文本区域中是否有选择
• 如果有选择，脚本将记住该选择
• 弹出窗口打开
• 在弹出窗口的标题输入中，将显示选择
• 用户填写url
• 用户按下OK按钮
• 弹出窗口消失，所选文本被链接替换
• 该链接看起来像

这是我的一些代码：

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

函数wrapAsLink（url）{
var textArea=$（'.area'），
len=textarea.value.length，
开始=文本区域。选择开始，
结束=text区域。选择结束，
sel=textarea.value.substring（开始、结束），
替换=“”；
textarea.value=textarea.value.substring（0，开始）+替换+textarea.value.substring（结束，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>

插入超链接

滴度

http://example.com/

好啊
取消

并将其添加到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();
}

$（'#btnedit bold'）。打开（“单击”，函数（e）{
wrapText（“b”）；
});
$（“#btnedit italic”）。在（“单击”上，函数（e）{
wrapText（“i”）；
});
$（“#btnedit underline”）。在（“单击”上，函数（e）{
wrapText（“u”）；
});
$（“#btnedit delete”）。在（“单击”上，函数（e）{
wrapText（“del”）；
});
$（“#btnedit链接”）。在（“单击”上，函数（e）{
var textArea=$（'.area'），
len=textArea.val（）.length，
开始=文本区域[0]。选择开始，
结束=文本区域[0]。选择结束，
selectedText=textArea.val（）.子字符串（开始、结束）；
$（'btnedit title'）.val（selectedText）；
$（'btnediturl'）.val（'http://'）；
$（'#prompt'）.show（）；
});
$（“#btnedit ok”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#prompt'）.hide（）；
替换=''；
wrapLink（更换）；
}); 
$（“#btnedit cancel”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#prompt'）.hide（）；
}); 
函数包装（链接）{
var textArea=$（'.area'），
len=textArea.val（）.length，
开始=文本区域[0]。选择开始，
结束=文本区域[0]。选择结束，
selectedText=textArea.val（）.子字符串（开始、结束）；
textArea.val（textArea.val（）.substring（0，start）+link+textArea.val（）.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>

插入超链接

滴度

http://example.com/

好啊
取消

并将其添加到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();
}

$（'#btnedit bold'）。打开（“单击”，函数（e）{
wrapText（“b”）；
});
$（“#btnedit italic”）。在（“单击”上，函数（e）{
wrapText（“i”）；
});
$（“#btnedit underline”）。在（“单击”上，函数（e）{
wrapText（“u”）；
});
$（“#btnedit delete”）。在（“单击”上，函数（e）{
wrapText（“del”）；
});
$（“#btnedit链接”）。在（“单击”上，函数（e）{
var textArea=$（'.area'），
len=textArea.val（）.length，
开始=文本区域[0]。选择开始，
结束=文本区域[0]。选择结束，
selectedText=textArea.val（）.子字符串（开始、结束）；
$（'btnedit title'）.val（selectedText）；
$（'btnediturl'）.val（'http://'）；
$（'#prompt'）.show（）；
});
$（“#btnedit ok”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#prompt'）.hide（）；
替换=''；
wrapLink（更换）；
}); 
$（“#btnedit cancel”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#prompt'）.hide（）；
}); 
函数包装（链接）{
var textArea=$（'.area'），
len=textArea.val（）.length，
开始=文本区域[0]。选择开始，
结束=文本区域[0]。选择结束，
selectedText=textArea.val（）.子字符串（开始、结束）；
textArea.val（textArea.val（）.substring（0，start）+link+textArea.val（）.substring（end，len））；
$（'.area'）.keyup（）；
}

我想我做错了，因为当我添加您的更改时，所有脚本都不起作用。查看查看所有功能检查此小提琴，因为在JSFIDLE中，标记函数可能无法正确使用所选的选项：但是如果您尝试在浏览器中将其保存到html文件并运行它，则上述部分将起作用。这是我创建的单页。jquery包含了本地数据。它仍然没有任何作用。好像根本就没有脚本。在您创建的fiddle中没有包含jquery，因此，这在jsfiddle中产生了一个问题，我对它进行了更新并将它们分开：您说我必须在本地计算机上运行它，因为jsfiddle可能会出现问题。所以我做了。正如您在上一篇文章中所看到的，我将本地运行的文件放在那里。只是它不起作用。你给的新提琴也不起作用：（。我想我做错了什么，因为当我添加你的更改时，所有的脚本都不起作用