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

当我们点击glyphicon时，我需要一个功能来动态地输入textarea。在textarea中添加glyphicons显示的是文本而不是glyphicon

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

.glyphicon { 
 
    \t cursor: pointer; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Test</title> 
 
\t <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
 
    <meta content="utf-8" http-equiv="encoding"> 
 
\t <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>

搜索之前，请使用片断看到实际的问题。

来源

2017-07-19 Mr. Kumar

请向下滚动片断看点击glyphicons。 –

你不能直接在文本框中插入图标....你应该去ASCII格式 – sunil

@sunil：我正在做一个自定义编辑器。你能举个例子吗？因为我认为它应该可以工作 –

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

这样的工作，你可以围绕与contenteditable attrbibute集添加到<div>true

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

您还可以，如果你想它的外观和感觉更像是一个文本区域使用<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>

来源

2017-07-19 06:13:07

非常感谢你的帮助。 :) ..另外一件事，我只是注意到，如果我们想插入一些文字之间的glyphicon ..现在它是在最后的位置添加是否光标在中心。在此先感谢您的帮助 –

没有问题。这会变得更棘手，你可以找到一个targetElement，并在它的previous_content [0] .insertBefore（targetElement，new_icon）之前插入新的图标;如果你有新的问题，你应该打开一个不同的问题，话题并与你的问题相关。另外，花点时间阅读https://stackoverflow.com/help/someone-answers –

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

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

来源

2017-07-19 04:50:48 jack

可以用一个示例来显示。我同意ckeditor和所有人都在使用glyphicons ..但事情是这样的......所以如果你可以使用测试代码片段显示它，那将是非常棒的。 –

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

回答

相关问题