javascript - 如何将带有 链接的 作为简单文本添加到文本区域中？

Question

我希望能够添加带有 <a> 的链接基于用户输入的标签。

HTML

<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">
  <textarea></textarea>
</div>

JS

$('body').on('click', 'button.link-list', function() {
  $("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
  );
});

function updateTree() {
   var myLinks = $("#linkRef ul");
   $("#linkData textarea").val(myLinks.html() + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

上面插入了添加的列表，但它也插入了输入和按钮以及其中的所有 html，但不是实际值，我没有插入 <a>我试图首先解决基本问题时编写代码。

我期望的文本区域内的输出是:

<ul>
   <li>
     <a href="www.example.com">Example</a>
   </li>
   <li>
     <a href="www.example2.com">Example2</a>
   </li>
</ul>

我做了一个JsFiddle playground

这是another JsFiddle对于我遇到的另一个案例，我试图在此基础上解决这个新问题，但我没有成功

Answer 1

据我所知，您无法将 HTML 添加到文本区域

相反，您可以使用可编辑的 div (其行为类似于文本区域)

示例:<div class="texthere" contenteditable="true"></div>

还可以使用outerHtml所以你也得到 <ul></ul>

加上。我没有看到任何a在你的.main ul html (??)

参见jsfiddle或下面的片段

$('body').on('click', 'button.link-list', function() {
	$("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
    );
});

function updateTree() {
		var myLinks = $("#linkRef ul");
   $("#linkData .texthere").html(myLinks.prop("outerHTML") + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

textarea {
  width: 500px;
  height: 300px;
}

input {
  width: 400px;
  height: 40px;
  margin-bottom: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">

<div class="texthere" contenteditable="true"></div>

</div>