nuxt 引入富文本编辑器wangEditor，刷新就会报错？试试这个

引入wangEditor，第一次进入使用一切正常，一旦刷新，就会报错navigator is not defined或者document.getElementsByTagName is not a funciton.

为什么会出现这样的情况呢？

刷新的时候nuxt.js 会在服务器端渲染页面，而navigator和document是window对象，在客户端在可以访问的，所以会报错。

那该怎么解决呢？

其实非常简单，服务器端不能渲染，那等到服务器端渲染完了我们再加载组件就可以了。怎么做呢？可以用Vue的component标签，来动态的获取组件。

我们先看下官网文档，再根据官方文档进行修改。

官方文档例子如下：

<template><div style="border: 1px solid #ccc;"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default Vue.extend({components: { Editor, Toolbar },data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: { },editorConfig: { placeholder: '请输入内容...' },mode: 'default', // or 'simple'}},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器}
})
</script>

修改如下：

<template><div style="border: 1px solid #e8ecf0"><component:is="toolBarComponent"style="border-bottom: 1px solid #ccc":mode="mode":editor="editor":default-config="toolbarConfig"></component><component:is="editorComponent"v-model="html"style="height: 500px; overflow-y: hidden":default-config="editorConfig":mode="mode"@onCreated="onCreated"></component></div>
</template>
<script>import '@wangeditor/editor/dist/css/style.css'export default {data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: {},editorConfig: { placeholder: '请输入内容...' },mode: 'default', // or 'simple'toolBarComponent: null, // 工具栏editorComponent: null, // 编辑组件}},created() {if (process.client) {const editor = require('@wangeditor/editor-for-vue')this.editorComponent = editor.Editorthis.toolBarComponent = editor.Toolbar}},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},},}
</script>

如果有问题，评论区联系

nuxt 引入富文本编辑器wangEditor，刷新就会报错？试试这个相关推荐

django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
富文本编辑器 wangeditor 的使用
富文本编辑器 wangeditor 的使用为什么选择使用 wangeditor a. 轻量.简洁.界面美观.文档齐全.易用.开源免费.开源团队维护.有专业Q群答疑.持续更新.无需使用其他库.插件功能 ...
富文本编辑器wangEditor的使用（即学即用）
介绍 wangEditor 是一款基于JavaScript和CSS开发的Web富文本编辑器,其具有轻量级.简洁.易用的特点.当然,市面上有许多别的富文本编辑器,各有特点,本文专注于介绍wangEdit ...
HTML——实现富文本编辑器wangEditor的使用
HTML--实现富文本编辑器wangEditor的使用文章目录 HTML--实现富文本编辑器wangEditor的使用一.导入wangEditor.JS 二.直接引用文档链接三.包管理工具(no ...
css wangeditor 修改_HTML富文本编辑器wangEditor的使用
var E = window.wangEditor; var editor = new E('#editor') //配置信息 var config = editor.customConfig; // ...
特别好用的前端html富文本编辑器wangEditor个人使用案例
当前为jQuery版本demo,详细Vue组件版本请点此链接:特别好用的Vue富文本编辑器wangEditor自己使用案例组件,附源码,直接使用_膨胀的菜盒的博客-CSDN博客因公司项目后台管理平台 ...
vue 引入富文本编辑器（巨简单）
官方文档开始使用 · wangEditor 用户文档https://www.wangeditor.com/doc/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94 ...
富文本编辑器 wangeditor、Dialog中使用wangeditor、多次生成wangeditor实例
富文本编辑器如同我们在CSDN上写文章是的编辑框(如下图),使用场景通常是在编辑详细资料,内容.本次实习过程学习使用了wangeditor,是一个简洁,文档齐全的富文本工具.wangeditor官方文 ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...

nuxt 引入富文本编辑器wangEditor，刷新就会报错？试试这个

nuxt 引入富文本编辑器wangEditor，刷新就会报错？试试这个相关推荐

最新文章

热门文章