nuxt tinymce 富文本navigator is not defined

前言

用tinymce的时候会报navigator is not defined。

解决方案

关闭服务端渲染就能解决。
在plugins目录新建tinymce.js，内容如下。

import Vue from "vue"
import tinymce from "tinymce/tinymce"
import Editor from '@tinymce/tinymce-vue'
Vue.prototype.$tinymce = tinymce
Vue.component("Editor", Editor)

nuxt.config.js在plugins增加

  {
      src: '@/plugins/tinymce',
      ssr: false,
    },

界面这样写

  <textarea></textarea>

   mounted() {
        // window.tinymce.baseURL = window.location.origin + '/tinymce'
        this.$tinymce.init({
            selector: 'textarea',
            plugins: 'lists link image table code help wordcount image',
            toolbar: 'image',
            toolbar_mode: 'floating',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
        });
    }

当然了，界面也可直接引入组件标签。

        <div>
            <Editor   :init="init" />
        </div>
...省略 部分JS ...
   data() {
        return {
            init: {
                language: 'zh-Hans',   // 这是语言包，可以在https://www.tiny.cloud/get-tiny/language-packages/ 下载
                language_url: '/language/tinymce/zh_CN.js', //下载后放到static目录
                plugins: 'lists link image table code help wordcount image',
                toolbar: 'image',
                images_upload_url: '/api/image/upload',
            }
        }
    },

把node_modules里tinymce模块复制到static改名为_nuxt。

效果

在这里插入图片描述

css、js都会从本地加载

自定义本地资源加载的位置

先有tinymce模块。

  window.tinymce.baseURL = window.location.origin + '/tinymce'

我试了下这句写在tinymce.js也可以

import Vue from "vue"
import tinymce from "tinymce/tinymce"
import Editor from '@tinymce/tinymce-vue'
window.tinymce.baseURL = window.location.origin + '/_nuxt'
Vue.prototype.$tinymce = tinymce
Vue.component("Editor", Editor)