Summernote fonts 生产环境不可用

Question

I am using Summernote for a page where I want users to be able to format content for news items. While the edit panel displays fine in my local development environment, the same edit panel doesn't show the icons when published to my production environment. Here is a screenshot:

When I inspect the problem page using Edge I notice that some summernote font files are missing, and this obviously makes all kinds of sense:

So, clearly, the problem seems to be that the woff, woff2 and ttf files are not available in the expected bundles/font folder that shows in the console error messages. Do I need to make/populate this folder, or redirect summernote to another folder?

So, taking a step back, I have a C# .NET Standard 4.8 web project, and I installed summernote using npm which installed the summernote files in my project at node_modules/summernote. I can see the font files at node_modules/summernote/dist/font. I have referenced the summernote js and css in my page using bundles, here is a (slightly redacted) code snippet:

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/node_modules/summernote/dist/summernote.min.js",
                    "~/node_modules/bootstrap/dist/js/bootstrap.js")
                                .WithLastModifiedToken());

    bundles.Add(new StyleBundle("~/bundles/css").Include(
                    "~/node_modules/bootstrap/dist/css/bootstrap.css",
                    "~/node_modules/summernote/dist/summernote.css")
                                .WithLastModifiedToken());

I did wonder about a different type of bundle for fonts, but I couldn't find anything suitable - this may be the answer if anyone knows how to bundle fonts.

These then get rendered in the styles and scripts sections of my page template with:

@Styles.Render("~/bundles/css")

and

@Scripts.Render("~/bundles/bootstrap")

Hopefully that all makes sense, happy to provide more info on request.

So far I have tried:

• a post-build event to copy the fonts files into a bundles/font folder in the root of the site. This worked in my local development environment (where I was able to download the files by navigating to localhost:XXXX/bundles/fonts, but when I tried this on production it didn't work.
• I found this question, I couldn't make this work, but I feel the answer may be related to the answer Font files are not loading with ASP.NET Bundles

Any suggestions gratefully received.

Answer 1

I worked out the answer.

Instead of bundling the css and js into ~/bundles/... I should have been bundling them into ~/Content/..., for example:

bundles.Add(new ScriptBundle("~/Content/summernote").<etc>
bundles.Add(new StyleBundle("~/Content/summernote-css").<etc>

This allowed me to get to a solution by making a new /font/ folder in the Content folder in my MVC project just where the "~/Content/summernote" bundles expected to find them.

The key was that the css and js bundles were bundling stuff into ~/bundles/bootstrap, and when I looked at the summernote code it was referencing the fonts using a relative URL. It didn't occur to me that I could bundle the js and css anywhere except ~/bundles/... until I was walking in the woods this weekend. Fixed in 5 minutes.