富文本框在nuxt 中的使用方式及注意事项

• vue2-editor富文本框:https://www.vue2editor.com/
• 主要的问题是富文本框有些代码不直接在能服务器运行, 要区分环境.

一、下载安装第三方库

• npm install vue2-editor

二、配置引入

• 全局引入(推荐):通过插件形式在plugins配置,并在nuxt.config引入,
• 注意:配置指定地址后要将ssr改为false,因为富文本框有很多代码是在浏览器中渲染的.

配置

• nuxt.config中找到plugins

 plugins: [
    {
      src: "@/plugins/vue2editor",
      ssr: false
    }
  ],

引入插件

• plugins/vue2editor.js

import Vue from "vue";
import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);

使用

<template>
  <div class="index">
    <div>
      <!-- 实时演示编译器生成的html字符串,最终会被发送到服务器 -->
      {{ content }}
    </div>
    <!-- 富文本编译器 -->
    <!-- client-only:声明只在浏览器渲染 -->
    <client-only>
      <VueEditor v-model="content" />
    </client-only>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "", //富文本框输入的内容
    };
  },
};
</script>

效果

• 局部引入:需要在文件中输入process.browser判断当前是否在浏览器环境,process是全局的属性,browser是布尔值.

三、常见报错

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

• 服务器渲染跟浏览器的不一致所产生的错误
• 正常来说VueEditor这个标签并不是页面真正渲染的标签,是需要通过插件生成HTML格式,但是服务器端并没有这类插件编译,所以对与服务器来说并不认识这个标签,就按照VueEditor这个原文输出.在最终服务器与浏览器校验时不一致就报错.
• 所以在编写VueEditor时也需要声明client-only只在浏览器中渲染即可

四、总结

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

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

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