在 textarea 中添加 glyphicons 显示的是文本而不是 glyphicon答案

【问题标题】：Adding glyphicons in textarea is showing text instead of glyphicon在 textarea 中添加 glyphicons 显示的是文本而不是 glyphicon
【发布时间】：2017-12-24 03:51:07
【问题描述】：

当我们点击 glyphicon 时，我需要一个功能来动态输入文本区域。

$(document).ready(function(){
        //Click Event of glyphicon class  
		$(document).on('click','.glyphicon',function(){
             
			var previous_content = $.trim($("#area").html());  
			var new_icon = '<span class="'+$(this).attr('class')+'"></span>';
      
			 //*****The below method of create element is also not working
             //var new_icon = document.createElement("span");
		     //new_icon.setAttribute('class', $(this).attr('class'));
      
			var new_content = previous_content+new_icon;
			$("#area").html(new_content);
		    
		});
    
});

.glyphicon {
    	cursor: pointer;
    }

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<textarea id="area" rows="10" cols="10"></textarea>
<p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>
<p>Copyright-mark icon: <span class="glyphicon glyphicon-copyright-mark"></span></p>     
</body>
</html>

搜索前请使用sn-p查看实际问题。

【问题讨论】：

请向下滚动 sn-p 以查看可点击的字形图标。
你不能直接在文本框中插入图标......你应该去ASCII格式
@sunil：我正在制作一个自定义编辑器。你能举个例子吗？因为我认为它应该工作
@sunil 我们可以把它想象成表情符号。就像我们将表情符号添加到 textarea 的内容中一样。就像那样

标签： javascript jquery html bootstrap-4 glyphicons

【解决方案1】：

您无法在 TextArea 中显示呈现的 HTML。

作为一种变通方法，您可以添加一个 <div> 并将 contenteditable 属性设置为 true

<div id="area" contenteditable="true"></div>

如果您希望它的外观和感觉更像 TextArea，也可以使用 <pre> 标签。

这是一个工作示例：

$(document).ready(function() {
  //Click Event of glyphicon class  
  $(document).on('click', '.glyphicon', function() {

    var previous_content = $.trim($("#area").html());
    var new_icon = '<span class="' + $(this).attr('class') + '"></span>';

    //*****The below method of create element is also not working
    //var new_icon = document.createElement("span");
    //new_icon.setAttribute('class', $(this).attr('class'));

    var new_content = previous_content + new_icon;
    $("#area").html(new_content);

  });

});

.glyphicon {
  cursor: pointer;
}

#area {
  width: 200px;
  height: 140px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="area" contenteditable="true">This &lt;div&gt; tag is editable just like a TextArea.<br /></div>
  <p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>
  <p>Copyright-mark icon: <span class="glyphicon glyphicon-copyright-mark"></span></p>
</body>

</html>

【讨论】：

非常感谢您的帮助。 :).. 还有一件事我刚刚注意到，如果我们想在某些文本之间插入字形图标.. 现在它在最后一个位置添加光标是否在中心。提前感谢您的进一步帮助
没问题。这有点棘手，您可以找到一个 targetElement 并在它之前插入新图标 previous_content[0].insertBefore(targetElement, new_icon); 如果您遇到新问题，您应该打开一个不同的问题，以便这个问题保持主题并与您的问题相关。另外，花点时间阅读stackoverflow.com/help/someone-answers

【解决方案2】：

您可以将 html 标记放入 input 或 textarea，但不会被解析。（如果是的话，那将是一个巨大的安全漏洞！）相反，输入只是……文本。因此，如果您想使用该文本中的 html，则需要再执行一步。

为了将图标跨度呈现为实际样式化的 html 跨度，您需要从输入字段中捕获它们，解析它们，然后显示呈现的版本。您可以查看基于 Markdown 或其他 WYSIWYG 编辑器如何处理此问题，但基本上，实际输入中的 <span> 将始终只是字符串 <span>。

【讨论】：

你能举个例子。我同意 ckeditor 和所有人都在使用 glyphicons.. 但问题是如何？.. 所以如果你可以使用测试 sn-p 来展示这一点会很棒。