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)

参考

• https://blog.csdn.net/qq_39199892/article/details/103817826