グリフコンの代わりにテキストを表示するグリフコン

グリフコンをクリックすると、テキストエリアに動的に入力する機能が必要です。実際の問題を見てスニペットを使用してください検索する前にグリフコンの代わりにテキストを表示するグリフコン

$(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

：

はここで働い例です。 –

テキストボックスに直接アイコンを挿入することはできません....あなたはASCII形式にしてください – sunil

@sunil：私はカスタムエディタを作っています。あなたは例を挙げていただけますか？私はそれが動作するはずだと思うので –

レンダリングされたHTMLをTextAreaに表示することはできません。あなたの周りの仕事として

は、あなたがそれを見て、より多くのTextAreaのように感じるようにしたい場合にも<pre>タグを使用することができますtrue

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

に設定contenteditable attrbibuteで<div>を追加することができます。クリッカブルglyphiconsを見るためにスニペットを下にスクロールしてください

$(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

ありがとうございました。 :)私はいくつかのテキストの間にグリフコンを挿入したい場合は、もう1つだけ私は気づいた..今のところ最後の位置にカーソルが中央にあるかどうかを追加しています。助けを前にありがとう –

問題ありません。それはちょっと難しいです、あなたはtargetElementを見つけて 'previous_content [0] .insertBefore（targetElement、new_icon）;の前に新しいアイコンを挿入することができます新しい問題がある場合は、あなたの質問に関連しています。また、https://stackoverflow.com/help/someone-answersを読んでください。 –

inputまたはtextareaにhtmlマークアップを付けることはできますが、そのままでは解析されません。（もしあれば、それは巨大なセキュリティホールになるでしょう！）代わりに、入力はちょうど...テキストです。したがって、そのテキストからhtmlを使用する場合は、別の手順が必要です。

アイコンを実際のスタイルのhtmlスパンとしてレンダリングするには、入力フィールドからアイコンをキャプチャして解析し、レンダリングされたバージョンを表示する必要があります。 Markdownベースのエディタや他のWYSIWYGエディタがこれをどのように処理するかを調べることができますが、実際には<span>の文字列である<span>が実際に入力されます。

出典

2017-07-19 04:50:48 jack

例を表示できますか？私は、ckeditorとすべてがglyphiconsと一緒に働いていることに同意しました。しかし、事はどうですか？それで、あなたがテストスニペットを使ってこれを示すことができるなら、それは素晴らしいでしょう。 –

グリフコンの代わりにテキストを表示するグリフコン

答えて

関連する問題