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

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

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

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

编辑:我想在这里更清楚地说明,或者更确切地说,描述我想要的工作流程。起始情况是您在本地机器上拥有网站的源代码。
现在我想在我的编辑器/IDE/任何东西中打开纯文本源代码(HTML/CSS)(不是所见即所得!)。并且我想要一个实时预览,就在它旁边或不同的窗口(而不是在另一个选项卡中!),我想在编辑源代码时看到它。预览应该自动更新(或者当我保存文件时,这基本上是相同的,因为 CTRL+S 是一种反射 :P)。
此外,它应该有一个像 Firebug 或 Chrom(e|ium) 中那样工作的检查器。当我单击该检查器中的 CSS 选择器时,光标应该在相应的源文件中直接跳转到它。

另一项编辑:找到了这个https://stackoverflow.com/q/4680109/220652。几乎同样的问题。

答案1

有几个选择。

目前我只是使用Google Chrome 的开发者工具动作视频),因为它允许进行广泛的检查、详细的报告和覆盖。进行更改后,我只需复制更新的 CSS 并覆盖 CSS 文件的相关部分,刷新,然后继续工作。

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

在此处输入图片描述

我可以跟踪文件名和行号(复制更改后),然后将其粘贴到编辑器中

在此处输入图片描述

除此之外,最近还推出了一款名为WebPutty它旨在缓解您所描述的问题。虽然我还没有亲自使用过它,但它是由乔尔·斯波尔斯基的公司Fog Creek 软件(Joel 也是 StackOverflow 的联合创始人)所以我敢打赌它是一个相对稳定、简单且有效的产品。

答案2

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

不过,我可以建议您使用我在其他问题的答案中发布的几种工具,例如:Ubuntu 中有 Dreamweaver 的替代品吗?,即使我敢打赌你已经看过了,我还是在这里把它抄录下来以方便你阅读:

您的问题好像有点含糊。

首先,关于 Dreamweaver 的替代品,我发现其他所有答案的建议都很棒,但在寻找 Dreamweaver 的替代品时,对我来说最接近的应用程序是阿玛雅项目。它似乎比其他替代品更丰富,而且比 Kompozer 更精致一些。

以下是来自官方网站的截图,您可以看到它的实际效果:

在此处输入图片描述

点击以下链接可以查看更多截图: http://www.w3.org/Amaya/screenshots/Overview.html

您可能会发现它有点不稳定,至少对我来说是这样,但它也可能适合您的需要。

在使用了所见即所得编辑器之后,我更喜欢使用 BlueFish 直接编码,但它并不是所见即所得编辑器。

关于您对 firebug 问题的建议,我无法发表任何意见,抱歉。

如果您给 Amaya 一个机会,请告诉我们您做得如何。

祝你好运!

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

我测试了你在评论中提到的内容,发现 Amaya 甚至没有注意到文件/文件夹结构/名称发生了变化。这不符合你与此相关的需求。

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

在此处输入图片描述

我将密切关注你的问题,希望有人能提出一个好的替代方案。

祝你好运!

另外,在其他用户对同一问题的回答中,我发现了“Blue Griffon 网页编辑器“这似乎是唯一具有实时预览窗口的稳定的 Web 编辑器,顺便说一下,在分割模式下看不到。您只能看到代码或所见即所得预览,而不能同时看到两者。

为方便您使用,此处放有屏幕截图:

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

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

此工具包含许多有用的工具,但一些附加组件或插件可能不免费(需要付费)。这降低了它的吸引力。

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

这就是我能建议的。如果这不符合您的需求,我很抱歉……

祝你好运!

答案3

好啦,大家听着!吉尼太棒了!它有一个插件可以添加浏览器预览。您可以将其放在侧边栏、“底栏”或额外的窗口中。现在额外奖励的坏蛋杀手特征。1.这款浏览器使用 WebKit。这意味着,它有这个超棒的检查器!2.当您保存打开的文档时,浏览器会重新加载。

除此之外,它还有许多其他很棒的功能,但你应该亲自尝试一下。我就是爱上了它。以下是屏幕截图:

吉尼

答案4

尝试 Firefox 插件火力消散。它与 Firebug 集成并添加了“更改”选项卡,正如其禅意般的名称所暗示的那样,该选项卡显示您对 CSS 或 DOM 所做的任何更改。

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

firediff 截图

还有css更新器,虽然我没用过。

至于“选择器本地化”,我不太清楚你的意思,但选择Bug,您可以下载这里

相关内容