在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

回答

相關問題