nuxt引入tinymce遇到navigator，以及其他的一些坑

前言：
        之前因为有用过这个，不过那个项目没用nuxt，这次用nuxt引入tinymce，出现了好几个问题我从傍晚7点搞到11点，在11点多才找到方法，期间尝试了很多，搞得头都大了，最后发现居然如此简单，无言以对......

尝试用如下教程解决：

Nuxt.js框架引入第三方插件出现window/document/ navigator未定义问题_DingGeYiSheng的博客-优快云博客_navigator 未定义

结果并未解决，也许有的小伙伴可能遇到的就是上面的问题，可以尝试看看

随后我根据另外一个集成的方法，重新弄了一下，终于可以了，方法如下：

1、static下新建tinymce文件夹

2、将shins文件夹和langs中文包拷贝到tinymce下

3、components下新建tinymceEditor.vue

写入如下内容：

<template>

  <client-only>

    <editor id="tinymce" v-model="myValue" :init="init" :disabled="disabled"></editor>
  </client-only>

</template>

<script>

import editor from '@tinymce/tinymce-vue'

// 引入tinymce，并在客户端初始化
let tinymce;
if (process.client) {

  tinymce = require('tinymce/tinymce');

  // 样式图标
  require('tinymce/icons/default/icons');

  // 主题样式
  require('tinymce/themes/silver/theme');

  //  插入表格插件
  require('tinymce/plugins/table');

  //  列表插件
  require('tinymce/plugins/lists');

  //  字数统计插件
  require('tinymce/plugins/wordcount');

  // 自动链接插件
  require('tinymce/plugins/autolink');

  // 水平分割线
  require('tinymce/plugins/hr');

  // 预览
  require('tinymce/plugins/preview');
}


export default {

  components: {editor},

  props: {

    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    plugins: {
      type: [String, Array],
      default: 'lists  table  wordcount  link  hr  autolink  preview'
    },

    toolbar: {
      type: [String, Array],
      default: 'undo  redo  |  formatselect  |  bold  italic  hr  |  alignleft  aligncenter  alignright  alignjustify  |  bullist  numlist  outdent  indent  table  |  removeformat  preview'
    }

  },

  data() {
    return {
      //初始化配置
      init: {
        // 控件语言
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        // 富文本样式
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        // 高度
        height: 300,
        plugins: this.plugins,
        // 工具栏，如果是false表示隐藏
        toolbar: this.toolbar,
        // 隐藏最上方menu菜单
        menubar: false,
        // 拼写检查
        browser_spellcheck: true,
        // 去水印
        branding: false,
        statusbar: false, // 隐藏编辑器底部的状态栏
        elementpath: false, // 禁用下角的当前标签路径
        paste_data_images: false,  //  允许粘贴图像
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
      myValue: this.value
    }
  },

  created() {

  },

  methods: {

    //添加相关的事件，可用的事件参照文档=>  https://github.com/tinymce/tinymce-vue  =>  All  available  events
    //需要什么事件可以自己增加
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },

    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    }

  },

  mounted() { // 用process.client判断一下环境再执行

    this.$nextTick(() => {
      if (process.client) {
        window.tinymce.init({});
      }
    })

  },

  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  }

}

</script>

<style scoped>

</style>

4、使用富文本

<template>》
	  <!-- 大小可自定义 -->
      <div style="width: 100%;height: 500px;">
        <tinymceEditor
          v-model="msg"
          :disabled="disabled"
          ref="editor"
        ></tinymceEditor>
      </div>

</template>
<script>
import tinymceEditor from '~/components/tinymce-editor'

export default {
  components: {
    tinymceEditor
  },
  data (){
    return {
      msg:'富文本编辑器',
      disabled:false
      }
  }
}
</script>

原文：nuxt.js中引入tinymce并封装成组件使用(亲测有用)_我有一根魔法棒的博客-优快云博客_nuxt tinymce