Emoji und andere unicode-Zeichen, die nicht richtig in Winkel

Ich habe eine web-app, die mithilfe von Nachrichten von Twitter, zum Beispiel.

Einen feed von JSON wird verwendet, um erstellen Sie eine Liste von Nachrichten, aber Charaktere wie ??? sind die Anzeige als Fragezeichen in einer Raute. Das element sieht wie folgt aus:

<div class="inner-message" ng-bind-html="unit.caption_text | linky:'_blank'"></div>

Wenn ich eine JSON-url in Firefox und Chrome diese Anzeige in Ordnung.

Probe head:

<!DOCTYPE html>
<html class="wf-opensans-n4-active wf-active" lang="en">
<head>
<meta charset="utf-8">

Eine Sache, die ich gefunden habe beim Debuggen: wenn die Nachrichten alle in ein array von Objekten, aber nicht Teil der $scope, ich kann nur hinzufügen, Sie auf die Seite und die emoji korrekt angezeigt.

So denke ich, dass etwas passiert, in Winkel, dies zu tun. Ich habe versucht, ng-bind-html-ng-bind, aber das spielt es nicht. Ich habe versucht, das entfernen von ng-bind-html und die Verwendung von {{Einheit.caption_text}} in dem element, aber es bricht immer noch die unicode-Zeichen.

Im moment, ich muss in der Lage sein zu verwenden, der linky-filter, die zur Anzeige von links richtig, so dass ng-bind-html ist notwendig, aber ich glaube nicht, dass es das problem.

Etwas passiert, um Sie in javascript zu brechen-Codierung?

Gibt es einen Weg, um Sie korrekt anzuzeigen?

Update

Dieser zeigt die Symbole wie gewünscht, aber "linky" nicht hinzufügen, Formatierung, links.

<div class="inner-message">{{unit.text}}</div>

Dies zeigt, gebrochene Charaktere

<div class="inner-message" ng-bind-html="unit.text | linky:'_blank'"></div>

Update 2

Hab da an das Ende, damit die änderungen auch detailliert in die Pull-Anforderung, die Michael verlinkt, zu stoppen, die die Zeichen immer Durcheinander.

Ich fand es auch dazu beigetragen, die Konsistenz, wenn ich fügte hinzu, Symbola zu den font-stack für diese Nachrichten. Sie können herunterladen Symbola von diese Seite von George Douros . Ich lief es durch .ttf zu .woff-Wandler, um etwas bessere browser-Unterstützung, bietet zwei alternativen.

Check out this github.com/madhur/angular-emoji-popup

InformationsquelleAutor daveyfaherty | 2014-04-10

7

Hinweis: Dieser Beitrag wird nicht angezeigt, wie vorgesehen, über Chrome, da es keine Unterstützung für Emoji-Zeichen

Sieht es aus wie Eckige ist $sanitize - Dienst versucht, konvertieren Sie die Zeichen in Ihre HTML-entity entspricht. Aber für bestimmte einzelne emoji-Zeichen, teilt es auf "2". Wie gesehen werden kann, bei http://plnkr.co/edit/fDDen3bnnrQUvx3JfKgw?p=preview,
```
$scope.sanitizedText = $sanitize('?');
```
Ausgabe in der Vorlage als
```
{{sanitizedText}}
```
zeigt &#55357;&#56904;. Warum? Ich weiß es nicht.

Dies bedeutet, dass alles, was mit $sanitize effektiv brechen, so Zeichen. Dies beinhaltet
- Gezeigte Ausgabe mit ng-bind-html dass noch nicht Weg durch $sce.trustAsHtml
- Alles Durchlaufen linky, wie gesehen werden kann, in der linky Quelle, ruft $sanitize.
So, Sie kann vermeiden Sie HTML-gehen durch $sanitize solange
- Übergeben Sie die Schnur durch $sce.trustAsHtml
- Sie nicht führen Sie es durch den Eckigen, sofern linky filter, aber Rollen Sie Ihre eigenen, nicht $sanitize den Eingang.
Beispiel filter ist unten:
```
app.filter('unsafeLinky', function($sce) {
  //Regex from https://github.com/angular/angular.js/blob/master/src/ngSanitize/filter/linky.js#L5
  var urlRegex = /(((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>])/gi;
  return function(input, target) {
    var targetHTML = target ? ' target="' + target + '"' : '';
    return $sce.trustAsHtml(input.replace(urlRegex,'<a href="$1"' + targetHTML + '>$1</a>'));
  }
});
```
Die verwendet werden können, wie
```
<p ng-bind-html="text | unsafeLinky:'_blank'"></p>
```
Sehen Sie eine demo von dieser an http://plnkr.co/edit/sRJmt4YVO8udJInCd4Cy?p=preview

Wie der name bereits suggeriert, ist diese unsafeLinky-filter ist unsicher. Sicher sein, zu Vertrauen, wo der original text herkommt.

Wie vorgeschlagen am Anfang dieser Antwort, Chrome nicht angezeigt Emoji-Zeichen richtig. Um die Zeichen zeigen, in Chrom, müssen Sie möglicherweise verwenden Sie irgendeine Art von Bild-Ersatz. In jedem Fall vermute ich, dass sprengt den Rahmen dieser Frage.

Update

Gibt es PR für Eckige, könnte dieses Problem beheben, so dass die oben zu arbeiten, um unnötige, wenn es einmal verschmolzen in: https://github.com/angular/angular.js/pull/6911

Offenbar $sanitize ist gebrochen. Die Referenzen zu decodieren, um codepoints reserviert für das "ersatzpaar" Einheit von UTF-16; jemand der Iteration über UTF-16 code-Einheiten anstelle der tatsächlichen codepoints, dadurch brechen alles außerhalb der BMP. Weg zu gehen-Bibliothek Autor.
Alex fand ich, dass Letzte Nacht, und es funktioniert. Deine Antwort ist richtig!!!! Ich habe auch heruntergeladen font face zu geben, konsequente Umgang mit dem emojis, und fügte hinzu, dass auch. Verweist es in meiner Frage.

InformationsquelleAutor Michal Charemza

Fand ich, dass der regex oben war zu brechen auf einige urls wie bit.yl shortlinks, so dass ich angepasst ein weiteres Beispiel, das ich irgendwo gefunden:

twitterApp.filter('parseUrl', function($sce) {
    var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/gi;
    return function(text) {        
        angular.forEach(text.match(urlPattern), function(url) {
            text = text.replace(url, "<a target=\"_blank\" href="+ url + ">" + url +"</a>");
        });
        return $sce.trustAsHtml(text);        
    };
});

Verwendung:

<p ng-bind-html="tweet.text | parseUrl"></p>

InformationsquelleAutor Frank MacDonald

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.