Nuxt 使用tinymce插件

一、原因

        tinymce插件是一个很好的编辑器，vue兼容使用也很方便，但是改nuxt框架后使用方式有点不同，网上大多数说的方法都是从module拷贝文件，然后自建component，可是这种方式太麻烦了，  简单点其实也可以用，下面来介绍一下吧

二、步骤

        1、安装tinymce

npm install tinymce -savenpm install @tinymce/tinymce-vue -save

或者在package.json添加

    "vue-tinymce-editor": "^1.6.2",
    "tinymce": "^6.1.0",

然后npm install进行安装

        2、创建plugin

在plugins文件夹下创建一个tinymce.js文件

import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue.component('tinymce', tinymce)

        3、引入plugin

在nuxt.config.js中加入

    { src: "~plugins/tinymce" ,ssr: false},

        4、下载中文js

                链接: https://pan.baidu.com/s/1hJP2HaqGtbxUzu3k3EePsw 提取码: 1f45 

                放在static的langs目录下

        5、开始使用

      <tinymce id="d1":other_options="init" ></tinymce>

这里大家根据需求来改，zh_CN引入自己项目的路径哦！
      init: {
        language_url: "xx/langs/zh_CN.js", // 语言包的路径
        language: "zh_CN", //语言P
        height: 600, //编辑器高度
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        fontsize_formats: "8px 10px 12px 13px 14px 15px 16px 17px 18px 19px 20px 24px 36px",
        font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings;NotoSansSC-Regular=NotoSansSC-Regular",
        automatic_uploads: true,
        images_upload_credentials: true,
       
      },

        6、OK可以使用了