在 Meteor 中获取合并的 css 文件的 URL答案

【问题标题】：Get URL of merged css file in Meteor在 Meteor 中获取合并的 css 文件的 URL
【发布时间】：2023-03-24 23:07:01
【问题描述】：

Meteor 在构建过程中将所有 (s)css 文件合并在一起，并生成一个名为 /merged-stylesheets.css?biglongnumber 的 css 文件

我在 Meteor 应用程序中使用 TinyMCE，我希望 TinyMCE 窗口中的内容使用与其所在页面相同的 CSS。 TinyMCE 有能力做到这一点：

tinyMCE.init({
    content_css : '/myStyles.css' 
});

所以我想获得该合并样式表的路径，以便将其传递给 TinyMCE。有没有办法做到这一点？

【问题讨论】：

使用 /merged-stylesheets 的任何原因本身不起作用？后面的东西？应该没关系...
我的理解是后面的文字？用于对 CSS 文件进行版本/时间戳，因此如果未提供，则浏览器可能会使用错误的文件版本。
知道了...在末尾添加一个 Math.random()*100000 怎么样？
+ new Date() 可能会更好 - 这是一种浏览器缓存破坏器。
这些建议可行，但它们并不是最佳的，因为它们会导致浏览器不必要地多次下载 CSS 文件。我真正想要的是找出文件的实际 URL。

标签： css meteor tinymce stylesheet

【解决方案1】：

您可以使用浏览器 DOM 获取当前页面上 CSS 文件的 URL，然后将它们以逗号分隔的列表提供给 TinyMCE。以下仅获取与当前域匹配的 CSS 文件（& 端口和方案）：

//Get CSS files being used
var schemeDomainPort = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
var cssFiles = '';
for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(schemeDomainPort) === 0) {
        cssFiles += cssFiles ? ',' + document.styleSheets[i].href : document.styleSheets[i].href;
    }
}

//Configure TinyMCE
$scope.tinymceOptions = {
    content_css: cssFiles, 
    ...
}

【讨论】：