CSS-Editor mit Echtzeit-Vorschau und Selektor-Lokalisierung

9

Der Titel sagt alles über das, wonach ich suche. Grundsätzlich sollte es eine Software sein, die alle Stile einer Website sammelt, damit ich sie bearbeiten und speichern kann.

Bitte lesen Sie die Frage sorgfältig, denn ich möchte, dass alle genannten Bedingungen erfüllt werden.

BEARBEITEN: Ich möchte hier klarer sein oder besser meinen gewünschten Workflow beschreiben. Ausgangssituation wird sein, dass Sie die Quellen der Website auf Ihrem lokalen Rechner haben.
Jetzt möchte ich die einfachen Quellen (HTML / CSS) in meinem Editor / IDE / was auch immer (kein WYSIWYG!) Öffnen. Und ich möchte eine Live-Vorschau direkt daneben oder in einem anderen Fenster (nicht in einem anderen Tab!), Ich möchte es sehen, wie ich die Quelle bearbeite. Die Vorschau sollte automatisch aktualisiert werden (oder wenn ich die Datei speichere, die im Wesentlichen die gleiche wäre, weil STRG + S eine Art Reflex ist: P).
Außerdem sollte es einen Inspektor haben, der wie in Firebug oder Chrom (e | ium) funktioniert. Wenn ich auf einen CSS-Selektor in diesem Inspektor klicke, sollte der Cursor direkt in die entsprechende Quelldatei springen.

ANDERE BEARBEITUNG: Dieser Link wurde gefunden. Fast das gleiche Problem.

    
dAnjou 31.08.2011, 22:19

8 Antworten

5

Ok, hör zu! Geany ist einfach SUPER! Es hat ein Plugin, das eine Browservorschau hinzufügt. Sie können es in der Seitenleiste, in der "Leiste" oder in einem zusätzlichen Fenster platzieren. Und jetzt die zwei Extra-Bonus-Bad Ass Killer Features. 1. Dieser Browser verwendet WebKit. Das heißt, es hat diesen tollen Inspektor! 2. Der Browser wird neu geladen, wenn Sie ein geöffnetes Dokument speichern.

Abgesehen davon hat es so viele andere tolle Features, aber Sie sollten es selbst ausprobieren. Ich für meinen Teil habe mich einfach verliebt. Hier haben Sie einen Screenshot:

    
dAnjou 16.09.2011, 01:25
12

Es gibt ein paar Optionen.

Gegenwärtig verwende ich einfach Google Chrome-Entwicklertools ( Action Video ), da es eine breite Palette von Inspektionen, detaillierten Berichten und Overriding ermöglicht. Nachdem ich meine Änderungen vorgenommen habe, kopiere ich einfach das aktualisierte CSS und überschreibe die relevanten Abschnitte der CSS-Datei, aktualisiere und füge weiter ein.

Hier habe ich eine Definition in Chrome Developer Tool

bearbeitet

Ich kann den Dateinamen und die Zeilennummer verfolgen (nachdem ich die Änderungen kopiert habe) und sie einfach in den Editor einfügen

Darüber hinaus gibt es kürzlich ein Tool namens WebPutty , das entwickelt wurde, um Ihr beschriebenes Problem zu lindern. Obwohl ich es noch nicht persönlich benutzt habe, wurde es von Joel Spolsky 's Firma entwickelt Fog Creek Software (Joel ist auch Mitbegründer von StackOverflow) Also würde ich wetten, dass es ein relativ stabiles, einfaches und effektives Produkt ist.

    
Marco Ceppi 07.09.2011 21:11
5

Diese Frage scheint bereits diskutiert worden zu sein, aber Sie sprechen genauer über einen CSS-Editor. Und ich bin mir sicher, dass sie deshalb Ihre Frage nicht als dupliziert gekennzeichnet haben.

Was ich Ihnen jedoch vorschlagen kann, ist die Verwendung mehrerer Tools, die ich in Antworten auf andere Fragen geschrieben habe: Dreamweaver Alternative in Ubuntu? , und auch wenn ich wetten kann, dass Sie es schon gesehen haben, ich schreibe es hier für Ihre Bequemlichkeit ab:

  

Ihre Frage scheint ein bisschen mehrdeutig zu sein.

     

Zuerst und in Bezug auf die Alternative zu Dreamweaver, fand ich   alle Vorschläge von allen anderen Antworten ausgezeichnet, aber wann   auf der Suche nach einer Alternative zu Dreamweaver, der nächsten Anwendung   - Für mich war es das Amaya Projekt. Das scheint das reichste zu sein   andere Alternativen und ein bisschen raffinierter als die   Kompozer.

     

Ein Screenshot aus dem offiziellen Web ist hier, damit Sie ihn sehen können   Aktion:

     

     

Zusätzliche Screenshots können durch Klicken auf den nächsten Link erreicht werden:    Link

     

Vielleicht finden Sie es ein wenig instabil, oder zumindest war es für mich aber   es kann auch Ihren Bedürfnissen entsprechen.

     

Nachdem ich mit WYSIWYG-Editoren gespielt hatte, bevorzugte ich die direkte Kodierung mit   BlueFish, aber es ist kein WYSIWYG-Editor.

     

Und über die Vorschläge für Ihr Problem mit dem Brandstifter kann ich nicht sagen   alles, tut mir leid.

     

Bitte lassen Sie uns wissen, wie Sie es gemacht haben, wenn Sie Amaya eine Chance geben.

     

Viel Glück!

     

Bearbeiten   == Nach der Installation von Amaya finde ich es noch lange nicht stabil, aber irgendwie   Es scheint eine bessere Eigenschaften als andere Anwendungen zu haben, wenn Sie   bedenke, dass andere Software einfache Texteditoren sind und Amaya wie   ein WYSIWYG-Editor.

     

Ich habe getestet, was du in deinem Kommentar gesagt hast und ich habe herausgefunden, dass Amaya das nicht tut   man merkt sogar, dass sich in den Dateien / Ordnern etwas geändert hat   Struktur / Name. Welche Ihren diesbezüglichen Bedürfnissen nicht entsprechen wird.

     

Im nächsten Screenshot sehen Sie, dass ich den Ordner "resources" umbenannt habe   "resources1" und Amaya zeigt es noch als "Ressourcen" und da ist es   keine Möglichkeit, es zu aktualisieren. Auch nach dem Neustart der Software und   das Projekt wird wieder geladen, Amaya wird es nicht bemerken.

     

     

Ich werde Ihrer Frage genau folgen und hoffen, dass jemand kommt und   eine gute Alternative fallen lassen.

     

Viel Glück!

Auch in den Antworten anderer Benutzer auf die gleichen Fragen fand ich den " Blue Griffon Web Editor ", der der einzige stabile zu sein scheint Web-Editor, der ein Echtzeit-Vorschau-Fenster enthält, das -btw- im Split-Modus nicht zu sehen ist. Sie können nur den Code oder die WYSIWYG-Vorschau sehen, nicht beide gleichzeitig.

Screenshots hier für Ihre Bequemlichkeit platziert:

Vorschaubildschirm:

Code Bildschirm:

Dieses Tool enthält viele nützliche Tools, aber einige der Add-Ons oder Plugins sind möglicherweise nicht kostenlos (kostenpflichtig). Das reduziert die Anziehungskraft darauf.

Das Aptana Studio 3 , das ich in dieser Antwort empfehle: Einfache Web-Entwicklung IDE / Editor wie Dreamweaver? ist für mich das beste Werkzeug zum Programmieren, da ich leben kann Vorschau mit einem Webbrowser in meinem Dual-View-Desktop. Was vielleicht nicht dein Fall ist.

Das kann ich vorschlagen. Entschuldigung, wenn das nicht Ihren Bedürfnissen entspricht und ...

Viel Glück!

    
Geppettvs D'Constanzo 09.09.2011 18:32
4

Tut mir leid, Leute, aber ich werde meine eigene Frage beantworten. Ich habe gerade StyleBot gefunden. Es erfüllt fast alle Bedingungen, die ich habe. Es hat keine automatische Vervollständigung, aber ich kann damit leben.

Hier ist ein Screenshot. Die Sidebar ist Stylebot. Sie haben einen grundlegenden Bearbeitungsmodus, in dem Sie einige einfache Eigenschaften schnell bearbeiten können, einen erweiterten Modus, in dem Sie das einfache CSS für das ausgewählte Element bearbeiten können und mit "CSS bearbeiten" können Sie das gesamte CSS für die Seite bearbeiten.

    
dAnjou 14.09.2011 22:50
2

Probieren Sie das Firefox-Addon Firediff . Es integriert sich in Firebug und fügt den Tab "Changes" hinzu, der, wie der zen-ähnliche Name vermuten lässt, alle Änderungen anzeigt, die Sie am CSS oder DOM vornehmen.

Klicken Sie mit der rechten Maustaste auf eine CSS-Änderung auf der Registerkarte "Änderungen", um entweder ein Diff oder eine Momentaufnahme Ihrer Änderungen zu speichern.

Es gibt auch cssUpdater , obwohl ich es nicht benutzt habe.

Was "selector localisation" betrifft, bin ich mir nicht ganz sicher, was Sie meinen, aber es gibt selectBug , die Sie hier herunterladen können.

    
scottl 08.09.2011 03:26
0

Aptana Studio ist eine großartige IDE, aber wenn ich nicht falsch liege, hat es keine Echtzeitvorschau. Wie auch immer, wenn Sie interessiert sind: link

PS: Es hat einen Hot-Key für die Vorschau, also ist es nicht so schlimm.

    
Lilian A. Moraru 07.09.2011 18:59
0

Keine Software per se, aber das Stylish Addon (Chrome und Firefox) aktualisiert eine Seite automatisch, wenn Sie ein Override-Stylesheet speichern. Im Gegensatz zu FireBug speichert es es, so dass Sie es kopieren und in eine richtige .css -Datei einfügen können, wenn Sie zufrieden sind.

    
Tarek Fadel 07.09.2011 20:25
0

Vor ein paar Wochen wurde ein neuer Spieler auf diesem Feld aufgestellt. Ich spreche über den Open-Source-Code-Editor Brackets von Adobe. Alle Informationen, die Sie brauchen, hier: Link

Die Version spring30 wurde vor ein paar Tagen veröffentlicht :) Viel Glück!

    
Rho 18.09.2013 12:32

Tags und Links