2015-11-28 9 views
6

Haftungsausschluss: um mit dem Online-Elm-Editor Ich bin ganz neu in ElmWie kann ich mit dem elm-html-Modul Sonderzeichen erhalten?

ich das Hantieren und ich habe in ein Problem laufen. Ich finde keine Möglichkeit, bestimmte Sonderzeichen (Copyright, Markenzeichen usw.) zu erhalten. Ich habe versucht:

import Html exposing (text) 

main = 
    text "©" 

Alles, was der eigentliche Text © auftauchten war. Ich habe auch versucht \u00A9 für die Unicode-Zeichen zu verwenden, aber das endete mir einen Syntaxfehler geben:

(line 1, column 16): unexpected "u" expecting space, "&" or escape code 

Der einzige Weg, ich tatsächlich gefunden jemand Webseite gehen sollte und Kopieren/Einfügen ihr Copyright-Symbols in meine app :

import Html exposing (text) 

main = 
    text "©" 

Dies funktioniert, aber ich würde viel lieber in der Lage schnell heraus, diese Zeichen zu geben, anstatt auf anderen Websites die tatsächlichen Symbole auf der Jagd nach zu haben. Gibt es eine bevorzugte/empfohlene Methode, um bei der Rückgabe von HTML in Elm nicht-maskierten Text zu erhalten?


Edit:

Speziell für Mac:

  • Option + g gibt Ihnen ©
  • Option + 2 gibt Ihnen
  • Option + r gibt Ihnen ®

Alle im Online-Editor getestet und sie haben funktioniert. Dadurch wird das Kernproblem immer noch nicht angetastet, aber es ist nur etwas Nettes für diese speziellen Sonderzeichen.

Antwort

7

Warum diese (absichtlich) ist nicht so einfach

Die „Macher“ von Elm sind verständlicherweise nur ungern uns eine Möglichkeit zu geben, „spezielle“ Zeichen in HTML-Text einzufügen. Zwei Hauptgründe:

  1. Dies würde ein "Text-Injektion" -Loch öffnen, wo ein böswilliger Benutzer beliebige HTML-Tags, sogar JavaScript-Code, in eine Webseite einfügen könnte. Stellen Sie sich vor, Sie könnten das in einer Foren-Site wie Stack Overflow tun: Sie könnten jeden, der Ihren Beitrag liest, dazu verleiten, Code Ihrer Wahl in seinem Browser auszuführen.
  2. Elm arbeitet hart, um optimale DOM-Updates zu erstellen. Dies funktioniert nur mit dem Inhalt von Tags, die Elm kennt, und nicht mit Text, der Tags enthält. Wenn Menschen Text in ein Elm-Programm einfügen, der HTML-Tags enthält, sind sie Teile des DOM, die nicht optimiert werden können.

Wie es möglich ist, sowieso

Das heißt, hat die Elm User-Community eine Lücke gefunden, die eine Abhilfe bietet. Aus den oben genannten Gründen ist es nicht empfehlenswert, vor allem nicht, wenn Ihr Text nicht konstant ist, d. H. Stammt aus einer Quelle außerhalb Ihres Programms. Dennoch werden Menschen wollen dies trotzdem tun, damit ich es dokumentieren werde andere die Mühe zu ersparen ich alles bis zu graben hatte und es funktioniert immer:

  1. Wenn Sie nicht bereits haben,
    import Json.Encode exposing (string)
    Dies ist in Paket elm-lang/core so sollte es bereits in Ihren Abhängigkeiten sein.
  2. ähnlich
    import Html.Attributes exposing (property)
  3. Schließlich erstellen Sie einen Tag eine property "innerHTML" und eine JSON-Wert Darstellung Ihres Textes, zB mit:
    span [ property "innerHTML" (string " ") ] []
+1

Obwohl ich Elm nicht mehr benutze, ist dies eine großartige Erklärung dafür, wie man eine Lösung "hackt", aber warum sollte man das nicht tun? Ich denke, das ist die richtige Antwort auf die ursprüngliche Frage. Danke und ich hoffe das hilft allen anderen, die neugierig sind. – Sam

1

Sie müssen die Symbole nicht suchen, Sie können sie aus einer Liste wie this one abrufen.

Wenn es zu lästig ist & Paste zu kopieren, können Sie auch eine Hilfsfunktion erstellen, die Sie mit Ihrem entkommen Zeichen wie diese verwenden:

import Html exposing (..) 
import String 

htmlDecode str = 
    let 
    replace (s1, s2) src= String.join s2 <| String.split s1 src  
    chrmap = 
     [ ("&reg;", "®") 
     , ("&copy;", "©") 
     ] 
    in 
    List.foldl replace str chrmap 

main = text <| htmlDecode "hello &copy;" 
+0

Tha Nein, du. Ich glaube, ich war ein wenig dramatisch, als ich "jagen" sagte :). Obwohl dies eine nette Hilfsfunktion ist, löst es nicht wirklich das Problem, das tatsächliche Copyright-Symbol (oder irgendein anderes Symbol, das nicht auf einer Tastatur ist) von einer anderen Website in meinen Code kopieren/einfügen zu müssen. Aber das große Plus dieser Hilfsfunktion ist, dass ich nur einmal kopieren/einfügen muss. Dann kann ich die normalen Zeichenfolgen verwenden, die HTML normalerweise in meiner Anwendung erkennt. – Sam

3

ich vor kurzem ein Elm package geschaffen, das diese löst. Wenn Sie text' "&copy;" verwenden, wird das Copyright-Symbol © anstelle des Escape-Codes angezeigt. Funktioniert auch mit "&#169;" und "&#x000A9;". Hoffe das hilft!

+0

Jason, vielen Dank für deine harte Arbeit! Es sieht sehr praktisch aus. Aber die Job-Interpreter-Entitäten des Browsers, um mit Html.text zu arbeiten, sind für mich ein wenig unklug. Ich werde weiter nach einer "eleganteren" Lösung suchen. –

2

Ich fand, dass es eine bessere Lösung: Sie können Sonderzeichen aus Unicode in char konvertieren und dann eine Zeichenfolge aus char erstellen:

Verwandte Themen