Amit1234: Website zum kopieren ins Editor

Hallo,

Ich bin Werkstudent und bau gerade eine Webseite zum managen von FTP-User. Ich habe die FTP-Verbindungsdaten(URL, Port, Fingerpringts, public Keys) alle ganz ordentlich in einer Tabelle und darüber einen Button mit der Beschriftung "As Text". Wenn ich darauf klicke, sollen die gleichen Daten so dargestellt werden, dass ich sie hübsch in ein Editor kopieren kann.

ich habe jetzt alle informationen mit <p> und <span> dargestellt, aber es sieht ziemlich naja aus. Wie macht man sowas idealerweise?

Vielen Dank im Voraus Amit

  1. Hallo Amit1234,

    definiere hübsch, bzw. deine Ansprüche an Vorformatierung für den Editor.

    Wenn's nur um einen mit Leerstellen ausgerichteten Textblock geht, ist ein riesiges DIV mit white-space:pre vermutlich dein Freund.

    Rolf

    --
    sumpsi - posui - clusi
    1. Danke für die schnelle Antwort. Also ideal wäre, wenn mein Text im Editor etwas geordneter wäre, dass man da mehr Struktur sieht. Gruß Amit

  2. Hello,

    [edited: TS]

    Ich bau gerade eine Webseite zum managen von FTP-Usern. Ich habe die FTP-Verbindungsdaten(URL, Port, Fingerprints, public Keys) alle ganz ordentlich in einer Tabelle und darüber einen Button mit der Beschriftung "As Text". Wenn ich darauf klicke, sollen die gleichen Daten so dargestellt werden, dass ich sie hübsch in einen Editor kopieren kann.

    Hast Du denn auch an eine Speicherung im Spaltentyp "binaray" gedacht?

    ich habe jetzt alle informationen mit <p> und <span> dargestellt, aber es sieht ziemlich naja aus. Wie macht man sowas idealerweise?

    Zeig doch mal, wie es momentan aussieht (Ausschnitt vom Screenshot) und wie es aussehen soll (Wunschbild).

    Dein Ziel lässt sich bestimmt erreichen ;-)

    Liebe Grüße
    Tom S.

    --
    Es gibt nichts Gutes, außer man tut es!
    Das Leben selbst ist der Sinn.
    1. Es soll benutzerfreundlich sein, dass man trotz der einheitlichen Schriftart, Schriftgröße und den ganzen Keys trotzdem eine Struktur erkennt.

      Ich stell mir so was ähnliches wie ein man page bei debian vor. Links hat man die Überschriften, rechts zwei tabs versetzt die Beschreibung.

      etwa so: https://man.openbsd.org/ssh

      (Edit Rolf B: Link zum Link gemacht)

      1. Hallo Amit1234,

        das verlinkte Beispiel ist Anschauungsmaterial für eine Darstellung, der Du mit Editor-Mitteln nahekommen willst. Aber eben nicht der Zielzustand, weil diese man-page eben NICHT manuell formatiert ist sondern mit HTML Mitteln (vor allem margins).

        Im Texteditor geht das natürlich so nicht, da musst Du

        - auf Hervorhebungen verzichten (außer ALLES IN GROSSSCHRIFT)
        - manches kann man auch auf diese Weise unterstreichen  
        	                      ---------------
        - Zeilen
             selbst
                 umbrechen
          - Texteinrückung durch vorangestellte
            Leerstellen erzeugen
        
                                            Oder, wenn es denn erwünscht
                                           ist, auch rechtsbündigen Text
        
                              Schön alles mit der 
                                  Hand am Arm
        

        Die Konvertierung von HTML in eine solche Darstellung ist vermutlich schwierig, wenn man das fertige HTML/CSS als Input hat. Vielleicht gibt es Tools, die das können, da mache ich jetzt aber keine Recherche (mein Suchansatz wäre „Convert HTML to plain text“).

        Ohne fertiges Tool geht es besser an der Stelle, wo man die Ausgangsdaten zur Verfügung hat. Sicherlich hast Du serverseitig eine Funktion, die deine <p> <span> Suppe kocht. Dort musst Du ansetzen und eine zweite Aufbereitungsform bereitstellen, als Text eben. Und Dir an jeder Stelle Gedanken machen, wie Du die gewünschte Aufbereitungsform mit Leerstellen und Zeilenumbrüchen erreichst. Ob Tabulatoren verwendbar sind, musst Du selbst wissen, denn die Breite eines Tabs kann von Anwender zu Anwender verschieden sein.

        Jedenfalls kannst Du Dir das Leben mit Helper-Funktionen erleichtern, die typische Layout-Muster darstellen können. Dann musst Du nur den Helper aufrufen und übergibst ihm den Text.

        Im nächsten Designschritt machst Du OOP draus und sammelst diese Helper in einer Formatierungsklasse. Davon baust du zwei Versionen: Formatieren für HTML und formatieren für Editor. Für die Ausgabe erzeugst Du je nach Szenario den passenden Formatierer und bereitest deinen Text damit auf. Fertig.

        Rolf

        --
        sumpsi - posui - clusi