Vue - Nuxt.js 安装引入 WangEditor V5 富文本编辑器最新版本，超详细使用教程（Nuxt.js 项目使用官方提供的示例，页面报错，刷新就会报错navigator is解决方案）

前言

如果您需要纯 Vue.js 项目中的安装引入教程，请访问：Vue - 超详细最新 WangEditor V5 富文本编辑器安装引入及使用教程

网上全都是纯 Vue.js 的编辑器老版本教程，如果直接在 Nuxt.js 项目中应用会直接报错，而且网上的教程非常乱，各种用法瞎搞。

如果使用纯 Vue.js 项目的安装引入教程，会直接报错，

本文将从 0-1 带您一路复制，快速实现 Nuxt.js 引入并提供给您常见的 API 用法，

---

代码干净整洁且注释详细，控制台无任何报错，

如下图所示，仅提供核心代码及插件 API 调用方法（无不相干的代码）：

第一步

该富文本编辑器提供了 Vue.js 版本，您直接安装即可。

打开项目根目录，依次执行如下 2 条安装命令：

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

如安装太慢，可改用 yarn 或 cnpm。

第二步

安装完毕，我们来写一下注册组件的方法。

打开项目下 plugins 文件夹，

在里面新建一个 editor.js 文件，复制以下代码：

    import Vue from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import '@wangeditor/editor/dist/css/style.css'
    
    Vue.component('WeEditor', Editor)
    Vue.component('WeToolbar', Toolbar)

第三步

然后还需要在配置文件中引入，注意一定要将 ssr 设置为 false。

打开项目下 nuxt.config.js 配置文件，

在 plugins 字段中，加入以下代码：

{ src: '@/plugins/editor.js', ssr: false }

第四步

为了后续使用方便，建议您封装为一个组件，名字和位置无所谓，后续路径正常引入即可。

打开项目 components 文件夹，

里面建立一个 editor.vue，一键复制以下代码：

<!-- 通过$emit,把富文本的内容(html)发送给父组件，详见 onChange() -->
<!-- 编辑器API文档: https://www.wangeditor.com/v5/API.html -->

   <template>
        <div>
            <WeToolbar
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            />
            
            <WeEditor
            class="content"
            v-model="html"
            :defaultConfig