Hinzufügen von Glyphicons in Textarea zeigt Text anstelle von Glyphon

Wenn wir auf Glyphicon klicken, brauche ich eine Funktionalität, um dann dynamisch in den Textbereich zu gelangen.Hinzufügen von Glyphicons in Textarea zeigt Text anstelle von Glyphon

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

Vor bitte Schnipsel der aktuellen Ausgabe zu sehen, benutzen suchen.

Quelle

2017-07-19 Mr. Kumar

Bitte scrollen Sie den Code-Schnipsel, die klickbare glyphicons zu sehen. –

Sie können Symbole nicht direkt in das Textfeld einfügen .... Sie sollten für das ASCII-Format gehen – sunil

@sunil: Ich mache einen benutzerdefinierten Editor. Kannst du bitte ein Beispiel geben? Weil ich denke, es sollte funktionieren –

Sie können gerendertes HTML nicht in einer TextArea anzeigen.

Als eine Arbeit um Sie ein <div> mit dem contenteditable attrbibute Satz true hinzufügen

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

Sie können auch einen <pre>-Tag verwenden, wenn Sie es wollen mehr aussehen und sich anfühlen wie ein TextArea-.

Hier ist ein funktionierendes Beispiel:

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

Quelle

2017-07-19 06:13:07

Vielen Dank für Hilfe. :) .. Eine Sache mehr, die ich gerade bemerkt habe, dass, wenn wir das Glyphicon dazwischen zwischen etwas Text einfügen möchten .. Wie jetzt es letzte Position hinzufügt, ob der Cursor in der Mitte ist. Vielen Dank im Voraus für weitere Hilfe –

Kein Problem. Das wird ein wenig komplizierter, man könnte ein targetElement finden und das neue Icon einfügen, bevor es 'previous_content [0] .insertBefore (targetElement, new_icon);' Wenn Sie neue Probleme haben, sollten Sie eine andere Frage öffnen, damit diese bleibt Thema und relevant für Ihre Frage. Nehmen Sie sich auch einen Moment Zeit und lesen Sie https://stackoverflow.com/help/someone-answers –

Sie können HTML-Markup in eine input oder textarea setzen, aber es wird nicht als solches geparst. (Es wäre ein großes Sicherheitsloch, wenn es wäre!) Stattdessen ist die Eingabe nur ... Text. Sie benötigen also einen weiteren Schritt, wenn Sie HTML aus diesem Text verwenden möchten.

Um die Icon-Spannen als tatsächliche formatierte HTML-Spannen darzustellen, müssen Sie sie aus dem Eingabefeld erfassen, analysieren und dann die gerenderte Version anzeigen. Sie können sehen, wie Markdown-basierte oder andere WYSIWYG-Editoren dies handhaben, aber im Grunde <span> innerhalb einer tatsächlichen Eingabe wird immer nur <span>, die Zeichenfolge.

Quelle

2017-07-19 04:50:48 jack

Können Sie mit einem Beispiel zeigen. Ich stimmte zu, dass Ckeditor und alle arbeiten mit Glyphicons .. Aber die Sache ist wie? .. So wäre es toll, wenn Sie dies mit einem Test-Snippet zeigen können. –

Hinzufügen von Glyphicons in Textarea zeigt Text anstelle von Glyphon

Antwort

Verwandte Themen