Nuxt使用mavon-editor富文本编辑器出现“document is not defined“

问题描述

        在NuxtJs中使用富文本编辑器 mavon-editor 总是经常出现 document is not defined 这个错误,有时候明明已经将 mavon-editor作为全局插件引用到配置文件里面了可还是脑残报错,如下图所示:

问题分析

         window 对象在NuxtJs中是属于服务端方法,在客户端使用的时候,就会提示 document is not defined,无法在客户端使用。

解决办法

        既然知道了问题所在，那么接下来就好解决了，只需要在使用mavon-editor的地方使用客户端标签将之包起来就OK了:

方法一

 <no-ssr>
    <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                  @imgAdd="uploadContentImg" @imgDel="delContentImg"/>
  </no-ssr>

方法二

 <client-only>
     <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                   @imgAdd="uploadContentImg" @imgDel="delContentImg" />
 </client-only>

这样就不会出现上面那种恶心的错误了