富文本组件使用/vue2-editor在nuxt项目中的使用方式

Vue2Editor

1.基本步骤

安装

npm install vue2-editor -S

引入和注册

import { VueEditor } from "vue2-editor";
export default {
    components: {
        VueEditor
    },
    .......其他代码

使用

        <el-form-item>
            <vue-editor 
            v-model="form.content"
            ></vue-editor>
        </el-form-item>

注意：这种方式如果在nuxt页面跳转时没有没有问题，但是一旦刷新了页面就会报错

 

2.nuxt使用方式

安装（是一样的）

npm install vue2-editor -S

引入

• 如果直接在组件内引入，由于这个富文本框组件使用到了document等只有浏览器才可以使用的api，所以会报错
• 需要利用nuxt的插件形式，其实本质就是相当于以前webpack在main.js当中设定的全局引入
• 在nuxt.config.js当中配置路径，注意ssr设置为false

a.引入

b.配置路径

使用

另外渲染时, 因为服务器没有富文本框, 而到了浏览器又出现了, 所以警告说 服务器渲染结果和浏览器显示内容不一致

解决办法 可以在 模板当中 template 指定 这个富文本框组件,只能在客户端渲染

nuxt 有一个默认自带的标签, client-only

<template>
  <div>
    <client-only>
      <vue-editor v-model="content"></vue-editor>
    </client-only>
  </div>
</template>

 

3.总结

富文本框的使用方式，依然是安装引入和使用三个步骤

不过要注意在引入的使用，添加 ssr:false 禁止服务器读取js代码

在模板渲染的时候 使用 client-only 标签禁止服务器渲染对应标签