具有实时预览和选择器本地化的CSS编辑器

标题说明了我正在寻找的一切。 基本上它应该是一个收集网站所有样式的软件,所以我可以编辑它们并保存它们。

请仔细阅读这个问题,因为我希望满足所有提到的条件。

编辑:我想在这里更清楚,或者更确切地描述我想要的工作流程。 起始情况是您在本地计算机上拥有网站的来源。
现在我想在我的编辑器/ IDE /中打开普通源(HTML / CSS)(没有WYSIWYG!)。 我想在它旁边或不同的窗口(不在另一个标签页面中)进行实时预览,我想在编辑源代码时看到它。 预览应该自动更新(或者当我保存文件时基本上是相同的,因为CTRL + S是一种reflection:P)。
此外,它应该有一个像Firebug或Chrom(e | ium)那样工作的检查器。 当我单击该检查器中的CSS选择器时,光标应该在相应的源文件中向右跳转到它。

另一个编辑:发现这个https://stackoverflow.com/q/4680109/220652 。 几乎相同的问题。

有几个选择。

目前,我只使用谷歌Chrome的开发者工具 ( 动作video ),因为它允许广泛的检查,详细报告和超越。 在进行更改后,我只需复制更新的CSS并重写CSS文件的相关部分,刷新,继续插入。

在这里,我在Chrome的开发者工具中编辑了一个定义

在此处输入图像描述

我可以按照文件名和行号(复制更改后),然后将它们粘贴到编辑器中

在此处输入图像描述

除此之外,最近推出了一款名为WebPutty的工具,旨在缓解您描述的问题。 虽然我还没有亲自使用它,但它是由Joel Spolsky的公司Fog Creek Software开发的 (Joel也是StackOverflow的联合创始人)所以我愿意打赌它是一个相对稳定,简单和有效的产品。

这个问题似乎已经讨论过,但你更具体地谈论了一个CSS编辑器。 而且我确信这就是为什么他们没有将你的问题标记为重复。

但是,我可以建议你使用我在其他问题的答案中发布的几个工具,例如: ubuntu中的Dreamweaver替代品? ,即使我敢打赌你已经看过它,我也会把它转录到这里以方便你:

你的问题似乎有点含糊不清。

首先,与Dreamweaver的替代方案相关,我发现所有其他答案的所有建议都非常好,但在寻找Dreamweaver的替代品时,最接近的应用程序 – 对我来说 – 是Amaya项目。 这似乎比其他替代品更丰富,而且比Kompozer更复杂一些。

来自官方网站的屏幕截图可供您查看实际操作:

在此处输入图像描述

点击下一个链接即可访问其他屏幕截图: http : //www.w3.org/Amaya/screenshots/Overview.html

您可能会发现它有点不稳定,或者至少它对我而言,但它也可能适合您的需求。

在玩WYSIWYG编辑器后,我更喜欢用BlueFish直接编码,但它不是WYSIWYG编辑器。

对于你对萤火虫问题的建议我不能说什么,抱歉。

如果你给Amaya一个机会,请告诉我们你是怎么做的。

祝好运!

编辑==安装Amaya之后,我发现它还远远没有稳定但不知何故它似乎比其他应用程序有更好的function,如果你认为其他软件是简单的文本编辑器和Amaya就像一个WYSIWYG编辑器。

我测试了你在评论中所说的内容,我发现Amaya甚至没有注意到文件/文件夹结构/名称发生了变化。 哪个不符合您的需求。

在下一个屏幕截图中,您可以看到我将“resources”文件夹重命名为“resources1”,而Amaya仍然将其显示为“资源”,并且无法强制刷新。 即使重新启动软件并再次加载项目,Amaya也不会注意到它。

在此处输入图像描述

我将密切关注你的问题,希望有人来一个好的选择。

祝好运!

另外,在其他用户对相同问题的答案中,我发现“ Blue Griffon Web Editor ”似乎是唯一一个具有实时预览窗口的稳定Web编辑器,在分离模式下无法看到-btw- 。 您只能看到代码或WYSIWYG预览,而不能同时看到两者。

为方便起见,放置屏幕截图:

预览屏幕: 在此处输入图像描述

代码屏幕: 在此处输入图像描述

此工具包含许多有用的工具,但某些附加组件或插件可能是非免费的(付费)。 这减少了它的吸引力。

Aptana Studio 3 ,我在这个答案中推荐: 基本Web开发IDE /编辑器,如Dreamweaver? 是 – 对我来说 – 最好的编程工具,因为我可以在双视图扩展桌面中使用Web浏览器进行预览。 这可能不是你的情况。

这就是我的建议。 对不起,如果这不符合您的需求,…

祝好运!

好的,大家都听! Geany真棒! 它有一个添加浏览器预览的插件。 您可以将其放在侧栏,“底栏”或额外的窗口中。 而现在这两个额外的奖励坏屁股杀手function。 1.此浏览器使用WebKit。 这意味着,它有这个很棒的检查员! 2.保存打开的文档时,浏览器会重新加载。

除此之外,它有许多其他很棒的function,但你应该自己尝试一下。 我刚刚坠入爱河。 这里有截图:

Geany

对不起,但我会回答我自己的问题。 我刚发现了Stylebot 。 它几乎满足了我的所有条件。 它没有任何自动完成,但我可以忍受。

这是一个截图。 侧边栏是Stylebot。 您有一个基本的编辑模式,您可以在其中快速编辑一些简单的属性,一个高级模式,您可以在其中编辑所选元素的纯CSS,使用“编辑CSS”,您可以编辑页面的整个CSS。

在此处输入图像描述

试试Firefox插件Firediff 。 它与Firebug集成,添加了“更改”选项卡,正如类似zen的名称所示,它显示您对CSS或DOM所做的任何更改。

右键单击“更改”选项卡中的CSS更改,以保存更改的差异或快照。

被骗的截图

还有cssUpdater ,虽然我还没用过它。

至于“选择器本地化”,我不完全确定你的意思,但有selectBug ,你可以在这里下载。

Aptana Studio是一个很棒的IDE,但如果我没错,它就没有实时预览。 无论如何,如果你感兴趣: http : //www.aptana.com/products/studio3

PS:它有一个用于预览的热键设置,所以这不是什么大不了的事。

不是软件本身,但是当您保存覆盖样式表时,Stylish Addon(chrome和firefox)会自动更新页面。 与FireBug不同,它会保存它,以便您在满意时将其复制并粘贴到正确的.css文件中。

就在几个星期前,一名新球员在这个领域上升了。 我正在谈论Adobe的开源代码编辑器Brackets。 您需要的所有信息,请访问: https : //github.com/adobe/brackets/wiki/Linux-Version

版本spring30刚刚发布了几天前:)祝你好运!