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

本文链接：https://blog.csdn.net/qq_43615903/article/details/105720376

问题描述

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

自己的测试项目结构如下：html放在public目录下，editormd的文件放在static目录下。
在这里插入图片描述
引入的路径

<link rel="stylesheet" href="../static/editormd/css/editormd.min.css" />
<script src="../static/asserts/js/jquery.min.js"></script>
<script src="../static/editormd/editormd.min.js"></script>

加载不出来

在这里插入图片描述
于是先在chrome中检查，console报错如下：

chrome继续点开Application，点开editormd.min.css,正常，其他的却路径出现了问题如下：
在这里插入图片描述

于是，我明白了，可能是需要的codemirror.min.css,dialog.css,mathesonscrollbar.css和相对应的js无法正常加载导致的　问题。再检查自己初始化editormd时写点js,我的path路径如下

于是打开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错误，于是改为如下，再运行没问题了
在这里插入图片描述

注意

以上路径是没有启动服务器的情况。由于我们的html大多放在templates目录下，而springboot对静态资源的访问默认都在public,static或自己配置的目录下，此时不要…/static这种写法了。假如我的html放在templates下，editormd文件放在static目录下，那么，此时path如下即可:
在这里插入图片描述