nuxt引入富文本编辑器wangeditor刷新就会报错navigator is not defined

Question

第一次进入使用wangeditor组件的页面是没有问题,正常显示的
但是一刷新就会报错
如果有遇过类似问题的大佬,还请指点一下

分析:
navigator 是window对象中的一个属性,碰到这种报错，是由于nuxt.js会在服务端渲染页面，而服务端并没有window或document

官方方法:
if (process.client) {
require('external_library')
}
(试过没有用)

某个大佬的方法,也没有用

代码如下:

html代码:

<template lang="html">
  <div class="wangeditor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

js代码:

<script>
import Editor  from 'wangeditor'
  export default {
    name: 'editoritem',
    data() {
      return {
        editor: '',
        info_:''
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear()
          this.info_ = null
        }
      },
      value: function(value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }
      }
    },
    mounted () {
          this.seteditor()
          this.editor.txt.html(this.value)
    },
    methods: {
      async seteditor() {
        this.editor = new Editor(this.$refs.toolbar, this.$refs.editor)
        // 配置菜单
        this.editor.customConfig.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
          'fullscreen' // 全屏
        ],
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 2M
        this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片 ???
        this.editor.customConfig.withCredentials = true,      
        /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/ 
        this.editor.customConfig.customUploadImg = async (files, insert) => { 
            /* files 是 input 中选中的文件列表 */ 
            let formData = new FormData() 
            formData.append('file', files[0]) 
            let data = ''
            data = await this.$axios.post('获取图片路径',formData)
            if(data.status == 201){
              insert(`图片路径`) 
            } else {
              this.$message({
                  message: '图片上传失败,请重新上传',
                  type: 'error',
                  center: true
              });
            }
        }
        this.editor.customConfig.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        // 创建富文本编辑器
        this.editor.create()
      }
    }
  }
</script>

Answer 1

window.navigator.userAgent

加个 window 试试

Answer 2

你好，您的问题解决了没？想问下你是怎么处理的，希望可以多多交流（QQ: 1059832563）