项目整合editormd由于path配置导致无法正常加载的坑

问题描述

springboot项目中用到editormd,正确引入了editormd相关的js 和cs 却还是无法加载,一直出现一个小圆圈或两个小框框,死活不知道是什么鬼,还以为是资源路径或配置了拦截器导致的,于是去掉了拦截器并仔细检查了引入的路径,还是不行啊。。。。醉了。

自己的测试项目结构如下:html放在public目录下,editormd的文件放在static目录下。
项目整合editormd由于path配置导致无法正常加载的坑_第1张图片
引入的路径

"stylesheet" href="../static/editormd/css/editormd.min.css" />


加载不出来

项目整合editormd由于path配置导致无法正常加载的坑_第2张图片
于是先在chrome中检查,console报错如下:
项目整合editormd由于path配置导致无法正常加载的坑_第3张图片

chrome继续点开Application,点开editormd.min.css,正常,其他的却路径出现了问题如下:
项目整合editormd由于path配置导致无法正常加载的坑_第4张图片
项目整合editormd由于path配置导致无法正常加载的坑_第5张图片
于是,我明白了,可能是需要的codemirror.min.css,dialog.css,mathesonscrollbar.css和相对应的js无法正常加载导致的 问题。再检查自己初始化editormd时写点js,我的path路径如下
项目整合editormd由于path配置导致无法正常加载的坑_第6张图片
于是打开editormd.js,搜索path,找到了如下代码

 setEditorTheme : function(theme) {  
            var settings   = this.settings;  
            settings.editorTheme = theme;  
            
            if (theme !== "default")
            {
                editormd.loadCSS(settings.path + "codemirror/theme/" + settings.editorTheme);
            }
            
            this.cm.setOption("theme", theme);![在这里插入图片描述](https://img-blog.csdnimg.cn/20200424001310778.png#pic_center)

            
            return this;
        },

于是豁然开朗,果然是这个path错误,于是改为如下,再运行没问题了
项目整合editormd由于path配置导致无法正常加载的坑_第7张图片

注意

以上路径是没有启动服务器的情况。由于我们的html大多放在templates目录下,而springboot对静态资源的访问默认都在public,static或自己配置的目录下,此时不要…/static这种写法了。假如我的html放在templates下,editormd文件放在static目录下,那么,此时path如下即可:
项目整合editormd由于path配置导致无法正常加载的坑_第8张图片

你可能感兴趣的:(Spring,Boot)