mavon-editor样式失效,快速解决

在使用mavon-editor时遇到样式失效的问题,原因是编辑器依赖的样式资源在线获取失败。解决方法是将mavon-editor的dist目录内容复制到项目public文件夹下,并在组件中指定外部链接地址。
摘要由CSDN通过智能技术生成

maven-editor作为一个优秀的基于vue的markdown编辑器。适用于博客类网站。
今天在开发中发现样式失效了,出现了如下问题

  • 左侧的输入框正常输入,但是右侧的显示框没有显示出正确的样式。
  • 单显示mavon-editor的显示框,显示样式依然失效

如果你也有样式失效的情况出现,那么恭喜你可以解决了兄弟。
主要是因为mavon-editor源码中对于样式的获取是在线的,应该是第一次获取是在线的,这就导致我在内网环境直接copy过去样式不显示。坑啊
首先我们找到maven-editor模块的组件maven-editor.vue
在这里插入图片描述
我们会发现它获取的资源是直接写的url,这就会导致如果你的项目像我一样,如果在内网部署的话,它需要的脚本和样式会获取不到。
在这里插入图片描述
解决办法:
找到源码下的dist文件夹

node_modules/mavon-editor/dist

将源码中dist文件夹下所有文件复制一遍,在自己的项目public文件夹下增加mavon-editor文件夹,然后再一起放进去,如下
在这里插入图片描述
接下来在使用<mavon-editor>的标签下增加属性:externalLink="externalLink"并在data中指定自己复制下来的文件中脚本和样式的对应路径
代码如下:

<mavon-editor
        ref=
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值