Html 添加链接以显示在 textarea 框内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6895109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add link to appear inside the textarea box
提问by Zain Ali
Is there a way that a user can enter a URL in a textarea and have the link actually display and work as a hyperlink?
有没有办法让用户可以在 textarea 中输入 URL 并让链接实际显示并作为超链接工作？
For example:
例如：
<textarea name="Miscell" cols="110" rows="5" wrap="Virtual" class="noborder">
blah blah blah=
<a href="http://www.googel.com/">Google</a>
blah blah blah
</textarea>
No link is displayed: what can I do?
不显示链接：我该怎么办？
I'm not creating that site: I'm just trying to change it using Firebug.
我不是在创建那个网站：我只是想用 Firebug 改变它。
采纳答案by nidhin
You can't place any 'Active Link' inside a text area. A text area is designed to displaying text only content. Instead of that you can use div and using some css make div as a text area.
您不能在文本区域内放置任何“活动链接”。文本区域旨在显示纯文本内容。相反，您可以使用 div 并使用一些 css make div 作为文本区域。
Eg: (Not my code)
例如：（不是我的代码）
<style type="text/css">
#box {
width: 400px;
margin: 0 auto;
overflow: auto;
border: 1px solid #0f0;
padding: 2px;
text-align: justify;
background: transparent;
}
</style>
HTML...
<body>
<div id="box">
<h4>My Links</h4>
<a href=">? Paragraph One Here.</p><p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
</div>
回答by Zasz
Use a DIV like this :
使用这样的 DIV：
<div id="box">
<h4>My Links</h4>
<p><a href="URL" title="Description">Text Description</a></p>
<p><a href="URL" title="Description">Text Description</a></p>
</div>
And make sure this script tag comes after this div element
并确保此脚本标记位于此 div 元素之后
<script type="text/javascript">
document.getElementById("box").contentEditable='true';
</script>
If you are using jQuery it does not matter where u put the script tag, just put it in $(document).ready();This will make the div editable. And this means the links also will be editable. I tested it out - works in chrome and ff.
如果您使用的是 jQuery，那么将 script 标签放在哪里并不重要，只要把它放在$(document).ready();这将使 div 可编辑。这意味着链接也将是可编辑的。我对其进行了测试 - 适用于 chrome 和 ff。
This will make the div editable, but you need to give the users some visual cue to tell them that this is editable - Use CSS to make it look like a text area.
这将使 div 可编辑，但您需要给用户一些视觉提示，告诉他们这是可编辑的 - 使用 CSS 使其看起来像一个文本区域。
回答by Dmitriy R
Not exact solution but you can look how it is implemented in RTF editors, just take simplest one as niceditor, simple JS code will convert any textarea in editable area with allowed HTML tags.
不是确切的解决方案，但您可以查看它是如何在 RTF 编辑器中实现的，只需将最简单的一个作为 niceeditor，简单的 JS 代码将使用允许的 HTML 标签转换可编辑区域中的任何文本区域。
