vue项目集成tinymce富文本编辑器

点击–>TinyMCE中文文档地址

安装tinymce

npm install tinymce -S
npm install @tinymce/tinymce-vue -S
npm install --save @packy-tang/vue-tinymce

挪动文件

tinymce-vue是tinymce官方提供的一个vue组件，可以直接拿过来使用，但是必须要到官网注册获取api-key，否则只有一段时间的试用期。所以你不想购买的话就老老实实编写自己的组件。

这两个组件安装完之后，在public目录下新建文件夹static，目录建好后，找到node_modules文件夹下的tinymce目录，将tinymce目录复制到我们创建的static文件夹内，如下图所示

配置中文语言包

现在一般install导入都会自带中文语言包 如果如图没有zh_CN.JS的话就需要自己下载

下载中文语言包

点击–>现在中文语言包
下载后解压 拿到zh_CN.js 放在如上图所示位置 没有文件夹就自己新建

编写组件

页面代码

<template>
  <vue-tinymce
    v-model="content"
    :setting="setting"
    :setup="setup"
    @change="change"/>
</template>

script代码

// 不建议直接挂载到main.js中 所以写在组件中
import Vue from 'vue'
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

// 找自己的本地路径
import '@/assets/tinymce/langs/zh_CN.js'

props 定义的属性

props: {
    // 富文本内容
    value: {
      type: [String, Object],
      default: ''
    },

    // 高度，默认450px
    height: {
      type: [String, Number],
      default: 450
    },

    // 不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
    // 使用autoresize插件：控制编辑器自动伸缩的最大最小高度。
    // 注：此参数默认设置的是可编辑区域，而不是整个编辑器
    maxHeight: [String, Number],

    // 1级菜单
    menubar: {
      type: [String, Boolean],
      default: 'file edit insert view format table tools help'
    },

    // 模板
    templates: {
      type: Array,
      default() {
        /* 示例
          {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
          {title: 'Some title 2', description: 'Some desc 2', url: 'print.php'}
        */
        return []
      }
    }

data中 定义的属性 都是关于富文本的配置

data() {
    return {
      setting: {
        // 本地语言
        language: 'zh_CN',
        // 隐藏右下角技术支持
        branding: false,
        // 编辑器高度
        height: this.height,
        max_height: this.maxHeight,
        // 只读属性
        readonly: this.readonly,
        // 占位文本
        placeholder: this.placeholder,
        // 工具栏模式 floating/sliding/scrolling/wrap
        toolbar_mode: 'wrap',
        // 1级菜单
        menubar: this.menubar,
        // 插件
        plugins: 'advlist anchor autolink autosave code codesample charmap emoticons \
                  fullscreen help hr image imagetools indent2em insertdatetime link lists \
                  media nonbreaking noneditable pagebreak paste print preview \
                  quickbars searchreplace table template wordcount',
        // HTML源码 撤销 恢复 恢复上次草稿
        // 剪切 复制 粘帖 粘贴为文本
        // 文字颜色 背景颜色 粗体 斜体 下划线 删除线 插入/编辑链接 描点
        // 左对齐 居中 右对齐 两端对齐 减少缩进 增加缩进
        // 格式 区块 字体 字号
        // 符号列表 序号列表
        // 引用 下标 上标 清除格式
        // 表格 插入/编辑图片 插入/编辑媒体 特殊符号 表情 水平分割线 分页符 插入日期/时间 打印 预览
        // 全屏
        // 百度地图 首行缩进 设置行高 格式刷 Ax多图片上传 代码示例 不间断空格 查找 模板 显示区块边框 字数统计
        /*toolbar: 'code undo redo restoredraft | \
                  cut copy paste pastetext | \
                  forecolor backcolor bold italic underline strikethrough link anchor | \
                  alignleft aligncenter alignright alignjustify outdent indent | \
                  styleselect formatselect fontselect fontsizeselect | \
                  bullist numlist | \
                  blockquote subscript superscript removeformat | \
                  table image media charmap emoticons hr pagebreak insertdatetime print preview | \
                  fullscreen | \
                  bdmap indent2em lineheight formatpainter axupimgs codesample nonbreaking searchreplace template visualblocks wordcount',*/
        toolbar: 'code undo redo restoredraft | \
                  cut copy paste pastetext | \
                  forecolor backcolor bold italic underline strikethrough link anchor | \
                  alignleft aligncenter alignright alignjustify outdent indent indent2em lineheight | \
                  hr nonbreaking pagebreak insertdatetime template searchreplace | \
                  styleselect formatselect fontselect fontsizeselect | \
                  bullist numlist | \
                  blockquote subscript superscript removeformat | \
                  table image media charmap emoticons codesample | \
                  wordcount print preview fullscreen',
        // 快速导航
        quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        // 文字大小列表
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 56px 72px',
        // 字体列表
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;\
                       宋体=SimSun,serif;\
                       新宋体=NSimSun,serif;\
                       仿宋=FangSong,serif;\
                       仿宋_GB2312=FangSong_GB2312,serif;\
                       黑体=SimHei,sans-serif;\
                       Arial=arial,helvetica,sans-serif;\
                       Arial Black=arial black,avant garde;\
                       Comic Sans MS=comic sans ms,sans-serif;\
                       Courier New=courier new,courier;\
                       Times New Roman=times new roman,times;\
                       Verdana=verdana,geneva;\
                       Webdings=webdings;\
                       Wingdings=wingdings,zapf dingbats;',
        // 模板
        templates: this.templates,
        // 粘帖图片base64
        paste_data_images: true,
        // 图片上传
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
        /*// 工具栏分组
        toolbar_groups: {
          formatting: {
            text: '文字格式',
            tooltip: 'Formatting',
            items: 'bold italic underline | superscript subscript',
          },
          alignment: {
            icon: 'align-left',
            tooltip: 'alignment',
            items: 'alignleft aligncenter alignright alignjustify',
          },
        }*/
      }
    }
  }

computed 定义的属性

 computed: {
    content: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  }

methods

methods: {
    setup() {
      //
    },

    change() {
      this.$emit('change', this.content)
    }
  }

style样式代码

<style lang="stylus">
.tox-tinymce
  border 1px solid #E4E7ED

.tox .tox-menubar + .tox-toolbar,
.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary,
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type)
  border-color #E4E7ED
</style>

完整代码

点击下载完整代码页面

报错

如果是这个报错就是路径问题，检查自己的路径是否正确